<template>
	<app-load :items="booking.response.data" :loading="booking.loading">
		<v-tabs v-model="page">
			<v-tab value="details" @click="tabChangeHandler('details')">
				Details
			</v-tab>
			<v-tab value="messages" @click="tabChangeHandler('messages')">
				Messages
			</v-tab>
		</v-tabs>
		<br />

		<BookingViewDetails v-if="page === 'details'" />
		<BookingViewMessages v-if="page === 'messages'" />
	</app-load>
</template>

<script setup>
const { ref } = Vue;
const { useRoute } = VueRouter;

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

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

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

const props = defineProps({
	auth: { type: Object, default: null },
});

const route = useRoute();
const page = ref(route.params.view || "details");

const booking = useAxios({
	method: "get",
	url: `/booking/${route.params.id}`,
	params: { origin: "guest" },
	autoSubmit: true,
	response: { data: false },
});

const tabChangeHandler = (tab) => {
	page.value = tab;
};
</script>
