<script lang="ts">
	import { page } from '$app/stores';
	import Avatar from './Avatar.svelte';
	import AlignLeft from './Icons/AlignLeft.svelte';
	import X from './Icons/X.svelte';

	export let isOpen: boolean;

	$: user = $page.data.user;
	$: segments = $page.url.pathname.slice(1).split('/');
	$: breadcrumb = segments.map((segment, index) => {
		return { name: segment, href: '/' + segments.slice(0, index + 1).join('/') };
	}) as { name: string; href: string }[];

	function handleToggle() {
		isOpen = !isOpen;
	}
</script>

<div
	class="z-50 flex w-full flex-row items-center justify-between border-b border-solid border-highlight-primary px-4 py-4 sm:px-8"
>
	<div class="flex flex-row items-center space-x-2 sm:space-x-0">
		<div class="flex items-center">
			<button on:click={handleToggle} class="block sm:hidden">
				{#if isOpen}
					<X class="h-5 w-5 text-muted" />
				{:else}
					<AlignLeft class="h-5 w-5 text-muted" />
				{/if}
			</button>
		</div>
		{#if !isOpen && segments.length}
			<div class="hidden items-center justify-center capitalize text-highlight-secondary sm:flex">
				{#each breadcrumb as segment}
					{@const last = segment === breadcrumb[breadcrumb.length - 1]}
					<a class="hover:text-primary hover:underline" href={segment.href}>
						{segment.name}
					</a>
					{#if !last}
						<span class="mx-1 text-highlight-secondary">/</span>
					{/if}
				{/each}
			</div>
		{/if}
		<!-- {#if !isOpen && segment}
			<div class="flex items-center justify-center capitalize text-highlight-secondary">
				{segment}
			</div>
		{/if} -->
	</div>
	<div class="flex flex-row items-center gap-2">
		{#if !isOpen}
			<a href="/logout">
				<button
					class="flex items-center gap-1 rounded-md p-2 text-destructive hover:bg-destructive/10"
				>
					Se déconnecter
				</button>
			</a>
		{/if}
		<div class="flex flex-row items-center gap-2">
			<Avatar />
			{user?.pseudo}
		</div>
		<!-- {!isLoading && me ? (
        <Popover
          open={isMenuOpen}
          onOpenChange={setIsMenuOpen}
          trigger={
            <button class="mx-auto flex items-center gap-2">
              <AvatarComponent name={me.pseudo} src={me.avatar} class="h-9 w-9" />
              <span>{me?.pseudo}</span>
            </button>
          }
        >
          <nav class="flex w-32 flex-col gap-2">
            <button
              class="flex items-center gap-1 p-2 text-destructive hover:bg-destructive/10"
              onClick={() => router.push('/logout')}
            >
              Se déconnecter
            </button>
          </nav>
        </Popover>
      ) : (
        <div class="animate-pulse">
          <div class="flex items-center gap-2">
            <div class="h-9 w-9 rounded-full bg-highlight-primary" />
            <div class="h-4 w-14 rounded-full bg-highlight-primary" />
          </div>
        </div>
      )} -->
	</div>
</div>
