<template>
	<v-layout v-if="getUser && (!!getUser.seted_up || (!!getUser.social_login.facebook || !!getUser.social_login.apple || !!getUser.social_login.google))" class="container-global-index">
		<v-container>
			<v-row>
				<v-col class="d-none d-md-block" cols="12" md="3">
					<v-sheet class="overflow-hidden" rounded="lg">
						<div
							v-if="getUser"
							class="bg-grey-lighten-4 text-center py-4 font-weight-bold"
						>
							{{ getUser.first_name }} {{ getUser.last_name }}
						</div>
						<v-list rounded="lg">
							<v-list-item v-for="n in navItems" v-bind="n.bind">
								<v-list-item-title>
									{{ n.title }}
								</v-list-item-title>
							</v-list-item>

							<v-divider class="my-2"></v-divider>

							<v-list-item @click="logout()">
								<v-list-item-title>Logout</v-list-item-title>
							</v-list-item>

							<v-list-item v-if="!!getUser.social_login.facebook" @click="logoutFacebook()">
								<v-list-item-title>
									{{ loadingDisconnectFacebook ? 'Disconnecting...' : 'Disconnect' }}
								</v-list-item-title>
							</v-list-item>
						</v-list>
					</v-sheet>
				</v-col>

				<v-col cols="12" md="9">
					<v-sheet class="overflow-hidden" rounded="lg">
						<div class="d-flex align-center border-b">
							<v-btn
								class="d-md-none"
								elevation="0"
								icon="mdi-menu"
								rounded="0"
								size="50"
								stacked
								@click="optionsDrawer.drawer = true"
							/>
							<div class="flex-grow-1 font-weight-bold text-uppercase pa-3">
								{{ route.meta.title }}
							</div>
						</div>

						<!-- Loading -->
						<app-loading v-if="!getUser" style="height:60vh;"/>

						<div class="pa-3">
							<Suspense>
								<router-view :auth="getUser" :route="route" :router="router"/>
							</Suspense>
						</div>
					</v-sheet>
				</v-col>
			</v-row>
		</v-container>

		<v-navigation-drawer
			v-model="optionsDrawer.drawer"
			class="d-md-none"
			style="z-index: 999999 !important"
		>
			<div style="height: 100vh">
				<v-list>
					<v-list-item v-for="n in navItems" v-bind="n.bind">
						<v-list-item-title>
							{{ n.title }}
						</v-list-item-title>
					</v-list-item>

					<v-divider class="my-2"></v-divider>

					<v-list-item color="grey-lighten-4" @click="logout()">
						<v-list-item-title>Logout</v-list-item-title>
					</v-list-item>

					<v-list-item color="grey-lighten-4" v-if="!!getUser.social_login.facebook"
								 @click="logoutFacebook()">
						<v-list-item-title>
							{{ loadingDisconnectFacebook ? 'Disconnecting...' : 'Disconnect' }}
						</v-list-item-title>
					</v-list-item>
				</v-list>
			</div>
		</v-navigation-drawer>
	</v-layout>

	<!-- Unlogged -->
	<v-layout v-else>
		<guest-login></guest-login>
	</v-layout>
</template>

<script setup>
const AppLoading = Vue.defineAsyncComponent(() =>
	loadModule(`${SAS_URL}/src/components/AppLoading.vue`, options),
);
const GuestLogin = Vue.defineAsyncComponent(() =>
	loadModule(SAS_URL + "/src/components/guests/login/Login.vue", options),
);
const props = defineProps({
	propertyData: {type: Object, default: () => ({})}
})
// const guestPanelPath = Vue.inject("guestPanelPath");
// const guestPanelUrl = Vue.inject("guestPanelUrl");
const route = VueRouter.useRoute();
const router = VueRouter.useRouter();
const store = window.useUserStore();
const {getUser} = Pinia.storeToRefs(store);

Vue.onMounted(() => {
		document.title = "Guest Panel"
		
		if(getUser.value && !(!!getUser.value?.seted_up || (!!getUser.value?.social_login?.facebook || !!getUser.value?.social_login?.apple || !!getUser.value?.social_login?.google))) {
			logout()
		}
	}
);

const navItems = [
	{
		title: "Bookings",
		bind: {to: `/${window.env?.sas_guest_panel_route}`},
	},
	{
		title: "Settings",
		bind: {to: `/${window.env?.sas_guest_panel_route}/settings`},
	},
];
const {signOut} = useFacebookAuth()

const optionsDrawer = Vue.reactive({drawer: false});
const loadingDisconnectFacebook = Vue.ref(false);
const routerView = VueRouter.RouterView;

const logout = () => {
	optionsDrawer.drawer = false
	store.setLogout();
};

const logoutFacebook = async () => {
	loadingDisconnectFacebook.value = true
	await signOut()

	await axios.post('/vendor/agents/revoke_social_media', {
		vendor_agent_revoke_token: {
			social_media: "facebook"
		}
	})
		.then(async () => {
			getUser.value.social_login.facebook = 0
		})
		.catch(e => {
			console.error(e)
		})
		.finally(() => {
			loadingDisconnectFacebook.value = false
		})
};
</script>
