<script lang="ts">
	import { goto } from '$app/navigation';
	import { resolve } from '$app/paths';

	import Icon from '$lib/components/icon/Icon.svelte';
	import ThemeSelector from '$lib/widget/ThemeSelector.svelte';
	import { authStore } from '$lib/stores/authStore.ts';
	import { toggleSidebar } from '$lib/stores/sidebarStore';
</script>

<header class="w-full h-18 flex justify-between items-center px-4 bg-base-300 flex-shrink-0">
	<div>
		<button
			class="btn btn-square btn-ghost"
			onclick={toggleSidebar}
			aria-label="Toggle Sidebar"
		>
			<Icon id="menu" size="24" />
		</button>
	</div>

	<div class="flex justify-center items-center gap-4 select-none">
		<ThemeSelector/>

		{#if $authStore.user }
			<div class="dropdown dropdown-end ">
				<div
					role="button"
					tabindex="0"
					class="rounded-full bg-primary h-8 w-8 p-4 flex items-center justify-center text-primary-content font-bold"
				>
					{#if $authStore.user.avatar}
						<img
							class="w-8 h-8 rounded-full"
							src="{$authStore.user.avatar}"
							alt="Avatar"
						/>
					{:else}
						<span>{$authStore.user.nickname.slice(0, 1)}</span>
					{/if}
				</div>
				<div class="dropdown-content mt-2 w-64 shadow-base-300 p-12 shadow-2xl bg-base-200 border border-base-content/10 rounded-box  ">
						<div class="text-center ">
							<p class="font-bold">{$authStore.user.nickname}</p>
							<p class="text-xs mt-2">{$authStore.user.username}</p>
						</div>
				</div>
			</div>

		{:else}
			<div class="flex items-center">
				<div class="">
					<button class="btn btn-primary btn-sm" onclick={() => goto(resolve("/auth/login"))}>
						登录
					</button>
				</div>
			</div>
		{/if}
	</div>
</header>