<template>
    <CollapsibleRoot class="flex flex-1 flex-col" v-model:open="open">
        <div class="z-50 md:hidden flex w-full items-center justify-between h-12 border-b border-light-35 dark:border-dark-35">
			<div class="flex items-center px-2">
				<CollapsibleTrigger asChild>
					<Button icon class="ms-2 !bg-transparent group">
						<Icon class="group-data-[state=open]:hidden" icon="radix-icons:hamburger-menu" />
						<Icon class="group-data-[state=closed]:hidden" icon="radix-icons:cross-1" />
					</Button>
				</CollapsibleTrigger>
				<NuxtLink class=" text-light-100 dark:text-dark-100 hover:text-opacity-70 max-md:ps-6" aria-label="Accueil" :to="{ path: '/', force: true }">Accueil</NuxtLink>
			</div>
			<div class="flex items-center px-2">
				<Tooltip message="Changer de theme" side="left"><ThemeSwitch /></Tooltip>
				<Tooltip v-if="!loggedIn" :message="'Se connecter'" side="right">
					<div class="hover:border-opacity-70 flex">
						<Icon :icon="'radix-icons:person'" class="w-7 h-7 p-1" />
					</div>
				</Tooltip>
				<Tooltip v-else :message="'Mon profil'" side="right">
					<DropdownMenu :options="[{
						type: 'group',
						items: [{
							type: 'item',
							label: 'Mon profil',
							click: () => useRouter().push({ name: 'user-profile' }),
						}, {
							type: 'item',
							label: 'Deconnexion',
							click: () => clear(),
						}]
					}]">
						<div class="hover:border-opacity-70 flex">
							<Icon :icon="'radix-icons:avatar'" class="w-7 h-7 p-1" />
						</div>
					</DropdownMenu>
				</Tooltip>
			</div>
        </div>
        <div class="flex flex-1 flex-row relative h-screen overflow-hidden">
			<CollapsibleContent asChild forceMount>
				<div class="bg-light-0 md:py-11 dark:bg-dark-0 z-40 xl:w-96 md:w-[15em] w-full border-r border-light-30 dark:border-dark-30 flex flex-col justify-between max-md:absolute max-md:-top-0 max-md:-bottom-0 md:left-0 max-md:data-[state=closed]:-left-full max-md:transition-[left] py-8 max-md:z-40 max-md:data-[state=open]:left-0">
					<div class="relative bottom-6 flex flex-col gap-4 xl:px-6 px-3">
						<div class="flex justify-between items-center max-md:hidden">
							<NuxtLink class=" text-light-100 dark:text-dark-100 hover:text-opacity-70 max-md:ps-6" aria-label="Accueil" :to="{ path: '/', force: true }">
								<Avatar src="/logo.dark.svg" class="dark:block hidden" />
        						<Avatar src="/logo.light.svg" class="block dark:hidden" />
							</NuxtLink>
							<div class="flex gap-4 items-center">
								<Tooltip message="Changer de theme" side="left"><ThemeSwitch /></Tooltip>
								<Tooltip v-if="!loggedIn" :message="'Se connecter'" side="right">
									<NuxtLink :to="{ name: 'user-login' }">
										<div class="bg-light-20 dark:bg-dark-20 hover:border-opacity-70 flex border p-px border-light-50 dark:border-dark-50">
											<Icon :icon="'radix-icons:person'" class="w-7 h-7 p-1" />
										</div>
									</NuxtLink>
								</Tooltip>
								<Tooltip v-else :message="'Mon profil'" side="right">
									<DropdownMenu :options="[{
										type: 'group',
										items: [{
											type: 'item',
											label: 'Mon profil',
											click: () => useRouter().push({ name: 'user-profile' }),
										}, {
											type: 'item',
											label: 'Deconnexion',
											click: () => clear(),
										}]
									}]">
										<div class="bg-light-20 dark:bg-dark-20 hover:border-opacity-70 flex border p-px border-light-50 dark:border-dark-50">
											<Icon :icon="'radix-icons:avatar'" class="w-7 h-7 p-1" />
										</div>
									</DropdownMenu>
								</Tooltip>
							</div>
						</div>
					</div>
					<div class="flex-1 xl:px-6 px-3 max-w-full max-h-full overflow-y-auto overflow-x-hidden">
						<NuxtLink :href="{ name: 'explore' }" no-prefetch class="flex flex-1 font-bold text-lg items-center border-light-35 dark:border-dark-35 hover:border-accent-blue" active-class="text-accent-blue border-s-2 !border-accent-blue">
							<div class="pl-3 py-1 flex-1 truncate">Projet</div>
						</NuxtLink>
						<Tree v-if="pages" v-model="pages"/>
					</div>
					<div class="xl:px-12 px-6 text-start text-xs text-light-60 dark:text-dark-60 relative top-4">
						<NuxtLink class="hover:underline italic" :to="{ name: 'legal' }">Mentions légales</NuxtLink>
						<p>Copyright Peaceultime - 2024</p>
					</div>
				</div>
			</CollapsibleContent>
			<slot></slot>
		</div>
    </CollapsibleRoot>
</template>

<script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';

const open = ref(false);
const { loggedIn, clear } = useUserSession();

const route = useRouter().currentRoute;
const path = computed(() => route.value.params.path ? Array.isArray(route.value.params.path) ? route.value.params.path[0] : route.value.params.path : undefined);

watch(route, () => {
	open.value = false;
});

const { data: pages } = await useLazyFetch('/api/navigation', {
	transform: transform,
	watch: [useRouter().currentRoute]
});

function transform(list: any[]): any[]
{
	return list?.map(e => ({ label: e.title, children: transform(e.children), link: e.path, tag: e.private ? 'private' : e.type, open: path.value?.startsWith(e.path)}))
}
</script>