<template>
	<v-row no-gutters style="height: 600px">
		<v-col
			md="12"
			style="
				height: 100%;
				overflow: auto;
				display: flex;
				flex-direction: column;
			"
		>
			<div
				ref="messageScrollRef"
				class="d-flex flex-column bg-grey-lighten-4 pa-6"
				style="flex-grow: 1; overflow-y: scroll; gap: 20px"
			>
				<template v-if="message.loading">
					<v-skeleton-loader type="list-item-two-line"/>
					<v-skeleton-loader type="list-item-two-line"/>
					<v-skeleton-loader type="list-item-two-line"/>
					<v-skeleton-loader type="list-item-two-line"/>
				</template>

				<template
					v-for="e in message.response.data.booking_messages"
					:key="e.id"
				>
					<div class="d-flex" :class="e.from_origin === 'agency' ? 'flex-row' : 'flex-row-reverse'">
						<div
							class="elevation-1 pa-3 bg-white rounded-lg"
							style="min-width: 300px"
						>
							<div class="font-weight-bold">
								{{
									[
										e.from_account.first_name,
										e.from_account.last_name,
									].join(" ")
								}}
							</div>
							<div v-html="e.message"></div>
							<div class="text-right text-disabled">
								{{ datetimeFormatData(e.created_at) }}
							</div>
						</div>
					</div>
				</template>

				<template
					v-if="
						message.response.data.booking_messages.length === 0 &&
						!message.loading
					"
				>
					<app-empty text="No messages found"/>
				</template>
			</div>

			<v-textarea
				class="ma-2"
				v-model="messagePost.data.booking_messages.message"
				label="Send message"
				rows="5"
				row-height="30"
				variant="outlined"
			>
				<template #append-inner>
					<v-btn
						:loading="messagePost.loading"
						icon="mdi-send"
						rounded="0"
						variant="text"
						@click="messagePost.submit()"
					/>
				</template>
			</v-textarea>
		</v-col>
	</v-row>
</template>

<script setup>
const {ref, watch} = Vue;

const AppEmpty = Vue.defineAsyncComponent(() =>
	loadModule(`${SAS_URL}/src/components/AppEmpty.vue`, options),
);

const props = defineProps({
	modelValue: {
		type: [String],
		default: "",
	},
	bookingId: {
		type: [Number, String],
		default: "",
	},
});

const emit = defineEmits(["update:modelValue"]);

const messageScrollRef = ref(null);

const messagePost = useAxios({
	method: "post",
	url: "/booking/booking_messages",
	data: {
		booking_messages: {
			booking_id: props.bookingId,
			message: "",
			type: "message",
			from_origin: "guest",
			to_origin: "agency",
			from_vendor_id: null,
			to_vendor_id: 2,
			to_account_id: null,
		},
	},
	onSuccess(response) {
		message.response.data.booking_messages.push(response.data.data);
		scrollMessage();
		messagePost.data.booking_messages.message = "";
	},
});

const message = useAxios({
	method: "get",
	url: `/booking/${props.bookingId}`,
	params: {origin: "guest"},
	autoSubmit: true,
	response: {data: {booking_messages: []}},

	onSuccess() {
		scrollMessage();
	},
});

const scrollMessage = () => {
	setTimeout(() => {
		if (!messageScrollRef.value) return;
		const elem = messageScrollRef.value;
		elem.scroll({top: elem.scrollHeight, behavior: "smooth"});
	}, 100);
};

watch([props], ([propsNew]) => {
	if (props.bookingId !== propsNew.bookingId) {
		message.submit();
	}
});

const datetimeFormatData = (date) => {
	return datetimeFormat(date);
};
</script>
