<template>
    <CollapsibleRoot class="flex flex-1 flex-col" v-model:open="open">
        <div class="z-30 flex w-full items-center justify-between border-b border-light-35 dark:border-dark-35 px-2">
			<div class="flex items-center px-2 gap-4">
				<CollapsibleTrigger asChild>
					<Button icon class="!bg-transparent group md:hidden">
						<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 m-2 flex items-center gap-4" 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" />
					<span class="text-xl max-md:hidden">d[any]</span>
				</NuxtLink>
			</div>
			<div class="flex items-center gap-8 max-md:hidden">
				<Tooltip message="Developpement en cours" side="bottom"><NuxtLink href="#" class="text-light-70 dark:text-dark-70">Parcourir les projets</NuxtLink></Tooltip>
				<Tooltip message="Developpement en cours" side="bottom"><NuxtLink href="#" class="text-light-70 dark:text-dark-70">Créer du contenu</NuxtLink></Tooltip>
			</div>
			<div class="flex items-center px-2 gap-4">
				<template v-if="!loggedIn">
					<NuxtLink class="text-light-100 dark:text-dark-100 hover:text-light-70 dark:hover:text-dark-70" :to="{ name: 'user-login' }">Se connecter</NuxtLink>
					<NuxtLink class="text-light-100 dark:text-dark-100 hover:text-light-70 dark:hover:text-dark-70 max-md:hidden" :to="{ name: 'user-register' }">Créer un compte</NuxtLink>
				</template>
				<template v-else>
					<NuxtLink class="text-light-100 dark:text-dark-100 hover:text-light-70 dark:hover:text-dark-70" :to="{ name: 'user-login' }">{{ user!.username }}</NuxtLink>
				</template>
			</div>
        </div>
        <div class="flex flex-1 flex-row relative h-screen overflow-hidden">
			<!-- <CollapsibleContent asChild forceMount> -->
				<div class="bg-light-0 dark:bg-dark-0 z-40 w-screen md:w-[18rem] border-r border-light-30 dark:border-dark-30 flex flex-col justify-between my-2 max-md:data-[state=closed]:hidden">
					<div class="flex-1 px-2 max-w-full max-h-full overflow-y-auto overflow-x-hidden" ref="treeParent">
						<div class="flex flex-row flex-1 justify-between items-center py-4 px-2">
							<NuxtLink :href="{ name: 'explore-path', params: { path: 'index' } }" 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">
								<span class="pl-3 py-1 flex-1 truncate">Projet</span>
							</NuxtLink>
							<NuxtLink v-if="user && hasPermissions(user.permissions, ['admin', 'editor'])" :to="{ name: 'explore-edit' }"><Button icon><Icon icon="radix-icons:pencil-2" /></Button></NuxtLink>
						</div>
					</div>
					<div class="xl:px-12 px-6 pt-4 pb-2 text-center text-xs text-light-60 dark:text-dark-60">
						<NuxtLink class="hover:underline italic" :to="{ name: 'roadmap' }">Roadmap</NuxtLink> - <NuxtLink class="hover:underline italic" :to="{ name: 'legal' }">Mentions légales</NuxtLink>
						<p>Copyright Peaceultime - 2025</p>
					</div>
				</div>
			<!-- </CollapsibleContent> -->
			<slot></slot>
		</div>
    </CollapsibleRoot>
</template>

<script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';
import type { DropdownOption } from '~/components/base/DropdownMenu.vue';
import { hasPermissions } from '#shared/auth.util';
import { TreeDOM } from '#shared/tree';
import { Content, iconByType } from '#shared/content.util';
import { dom, icon, text } from '#shared/dom.util';
import { unifySlug } from '#shared/general.util';
import { popper } from '#shared/floating.util';
import { link } from '#shared/proses';

const options = ref<DropdownOption[]>([{
	type: 'item',
	label: 'Mon profil',
	select: () => useRouter().push({ name: 'user-profile' }),
}, {
	type: 'item',
	label: 'Deconnexion',
	select: () => clear(),
}]);

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

await fetch(false);

const route = useRouter().currentRoute;
const path = computed(() => route.value.params.path ? decodeURIComponent(unifySlug(route.value.params.path)) : undefined);

await Content.init();
const tree = new TreeDOM((item, depth) => {
	return dom('div', { class: 'group flex items-center ps-2 outline-none relative cursor-pointer', style: { 'padding-left': `${depth / 2 - 0.5}em` } }, [dom('div', { class: ['flex flex-1 items-center hover:border-accent-blue hover:text-accent-purple max-w-full cursor-pointer font-medium'], attributes: { 'data-private': item.private } }, [
		icon('radix-icons:chevron-right', { class: 'h-4 w-4 transition-transform absolute group-data-[state=open]:rotate-90', style: { 'left': `${depth / 2 - 1.5}em` } }),
		dom('div', { class: 'pl-1.5 py-1.5 flex-1 truncate', text: item.title, attributes: { title: item.title } }),
		item.private ? popper(dom('span', { class: 'flex' }, [icon('radix-icons:lock-closed', { class: 'mx-1' })]), { delay: 150, offset: 8, placement: 'right', arrow: true, content: [text('Privé')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50' }) : undefined,
	])]);
}, (item, depth) => {
	return dom('div', { class: 'group flex items-center ps-2 outline-none relative cursor-pointer', style: { 'padding-left': `${depth / 2 - 0.5}em` } }, [link({ class: ['flex flex-1 items-center hover:border-accent-blue hover:text-accent-purple max-w-full'], attributes: { 'data-private': item.private }, active: 'text-accent-blue' }, item.path ? { name: 'explore-path', params: { path: item.path } } : undefined, [
		icon(iconByType[item.type], { class: 'w-5 h-5', width: 20, height: 20 }),
		dom('div', { class: 'pl-1.5 py-1.5 flex-1 truncate', text: item.title, attributes: { title: item.title } }),
		item.private ? popper(dom('span', { class: 'flex' }, [icon('radix-icons:lock-closed', { class: 'mx-1' })]), { delay: 150, offset: 8, placement: 'right', arrow: true, content: [text('Privé')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50' }) : undefined,
	])]);
}, (item) => item.navigable);
(path.value?.split('/').map((e, i, a) => a.slice(0, i).join('/')) ?? []).forEach(e => tree.toggle(e, true));
const treeParent = useTemplateRef('treeParent');

const unmount = useRouter().afterEach((to, from, failure) => {
	if(failure)
		return;

	to.name === 'explore-path' && (unifySlug(to.params.path).split('/').map((e, i, a) => a.slice(0, i).join('/')) ?? []).forEach(e => tree.toggle(e, true));
});

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

onMounted(() => {
	if(treeParent.value)
	{
		treeParent.value.appendChild(tree.container);
	}
})
onUnmounted(() => {
	unmount();
})
</script>