<script lang="ts">
	import { DAISYUI_THEME_OPTIONS } from '$lib/types/theme.ts';
	import ThemePreview from '$lib/widget/ThemePreview.svelte';
	import { getContext } from 'svelte';
	import { THEME_KEY, ThemeState } from '$lib/stores/theme.svelte.ts';
	const themeState = getContext<ThemeState>(THEME_KEY);

</script>

<div class="dropdown dropdown-center md:dropdown-end ">
	<div tabindex="0" role="button" class="rounded hover:bg-base-100  active:bg-base-200 p-2 overflow-hidden flex items-center gap-2">
		<ThemePreview themeId={themeState.theme} />
		<svg width="12px" height="12px" class="mt-px text-base-content size-2 fill-current opacity-60 sm:inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048"><path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path></svg>
	</div>

	<ul

		class="dropdown-content shadow  bg-base-200 border border-base-content/10 z-[1] rounded-box w-64 max-h-80 overflow-x-hidden overflow-y-auto ">

		{#each DAISYUI_THEME_OPTIONS as theme (theme.value)}

			<li class="text-base-content  w-full  ">
				<div
					role="button"
					tabindex="0"
					onclick={() => themeState.setTheme(theme.value)}
					onkeydown={(e) => {
						if (e.key === 'Enter' || e.key === ' ') {
							e.preventDefault();
							themeState.setTheme(theme.value);
						}
					}}
					class="gap-3 w-full flex  hover:bg-base-300 active:bg-primary p-2 items-center {theme.value === themeState.theme ? 'active' : ''}"
				>
					<ThemePreview themeId={theme.value} />
					<div class="  ">{theme.name}</div>
				</div>
			</li>
		{/each}
	</ul>
</div>