<script lang="ts">
	import { Moon, Sun } from '@lucide/svelte';

	import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';

	interface Props {
		log_lvl?: number;
		hide?: null | boolean;
		expand?: boolean;
		set_theme_mode: any;
		set_theme_name: any;
	}

	let {
		log_lvl = $bindable(0),
		hide = $bindable(false),
		expand = $bindable(false),
		set_theme_mode,
		set_theme_name
	}: Props = $props();
</script>

<!-- Change light and dark mode -->
<!--
if ($ae_loc.app_cfg.theme_mode == 'light') {
    document.documentElement.classList.remove('dark');
    document.documentElement.classList.add('light');
} else if ($ae_loc.app_cfg.theme_mode == 'dark') {
    document.documentElement.classList.remove('light');
    document.documentElement.classList.add('dark');
}
-->
<section
	id="AE-App-Theme"
	class="
        ae_app_theme
        hidden-print

        bg-blue-100 text-gray-900
        dark:bg-blue-800 dark:text-gray-200

        flex flex-col flex-wrap gap-1
        items-end justify-center

        w-72 max-w-72
        p-1
        border-2 border-gray-200

        duration-300 delay-150 hover:delay-1000 hover:ease-out
        transition-all
        "
	class:hidden={hide}
>
	<div
		class:hidden={!expand}
		class="flex flex-row flex-wrap gap-2 items-center justify-between w-full"
	>
		<!-- Theme Name: -->
		<span class="text-sm font-semibold">
			{$ae_loc.theme_name}
		</span>
		<select
			onchange={(event) => {
				// $slct_trigger = 'set_theme_name';

				let new_theme_name = event.target.value;
				// document.documentElement.theme = new_theme_name;

				console.log(`$ae_loc?.theme_name=${$ae_loc?.theme_name}`);
				// $slct_trigger = null;
				// Update the body attribute named "data-theme" to the current theme name.
				// document.body.setAttribute('data-theme', new_theme_name);
				// document.body.setAttribute('data-theme', $ae_loc?.theme_name);

				// NEW for Tailwind v4: Update the html attribute named "data-theme" to the current theme name.
				document.documentElement.setAttribute('data-theme', new_theme_name);

				// if ($ae_loc.theme_mode == 'light') {
				//     document.documentElement.classList.remove('dark');
				//     document.documentElement.classList.add('light');
				// } else if ($ae_loc.theme_mode == 'dark') {
				//     document.documentElement.classList.remove('light');
				//     document.documentElement.classList.add('dark');
				// }
			}}
			bind:value={$ae_loc.theme_name}
			class="select w-32"
			title="Theme name"
		>
			<option value="">-- None --</option>
			<option value="cerberus">Cerberus</option>
			<option value="concord">Concord</option>
			<option value="crimson">Crimson</option>
			<option value="hamlindigo">Hamlindigo</option>
			<option value="modern">Modern</option>
			<option value="nouveau">Nouveau</option>
			<option value="rocket">Rocket</option>
			<option value="terminus">Terminus</option>
			<option value="vintage">Vintage</option>
			<option value="wintry">Wintry</option>
			<!-- <option value="ae_c_osit">OSIT</option> -->
			<option value="AE_OSIT_default">OSIT</option>
			<option value="AE_c_IDAA_light">IDAA - light</option>
			<option value="AE_c_LCI">LCI</option>
		</select>
	</div>

	<div
		class="flex flex-row flex-wrap gap-2 items-center w-full"
		class:justify-between={expand}
		class:justify-end={!expand}
	>
		{#if expand}
			<!-- Hide theme options -->
			<button
				class="
                btn btn-sm text-xs
                preset-tonal-secondary hover:preset-filled-secondary-500
                transition-all group
                "
				onclick={() => {
					expand = !expand;
				}}
				title="Hide Theme Options"
			>
				<!-- <span class="fas fa-compress-alt"></span> -->
				<span class="fas fa-compress-arrows-alt m-1"></span>
				<span
					class="
                    hidden
                    group-hover:inline-block
                    text-xs
                    "
				>
					Hide Theme Options
				</span>
			</button>

			<button
				class="
                btn btn-sm text-xs
                preset-tonal-secondary hover:preset-filled-secondary-500
                transition-all group
                "
				onclick={() => {
					if ($ae_loc.theme_mode == 'light') {
						$ae_loc.theme_mode = 'dark';
					} else if ($ae_loc.theme_mode == 'dark') {
						$ae_loc.theme_mode = 'light';
					}

					if ($ae_loc.theme_mode == 'light') {
						document.documentElement.classList.remove('dark');
						document.documentElement.classList.add('light');
					} else if ($ae_loc.theme_mode == 'dark') {
						document.documentElement.classList.remove('light');
						document.documentElement.classList.add('dark');
					}
				}}
				title="Change light and dark mode"
			>
				<!-- <span class="fas fa-adjust"></span> -->
				{#if $ae_loc.theme_mode == 'light'}
					<Sun class="m-1" />
					<span class="hidden md:inline-block group-hover:inline-block">Light Mode</span>
				{:else if $ae_loc.theme_mode == 'dark'}
					<Moon class="m-1" />
					<span class="hidden group-hover:inline-block">Dark Mode</span>
				{/if}
				<span
					class="
                    hidden
                    group-hover:inline-block
                    text-xs
                    "
				>
					Change
				</span>
			</button>
		{:else}
			<button
				class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-500 group"
				onclick={() => {
					if ($ae_loc.theme_mode == 'light') {
						$ae_loc.theme_mode = 'dark';
					} else if ($ae_loc.theme_mode == 'dark') {
						$ae_loc.theme_mode = 'light';
					}

					if ($ae_loc.theme_mode == 'light') {
						document.documentElement.classList.remove('dark');
						document.documentElement.classList.add('light');
					} else if ($ae_loc.theme_mode == 'dark') {
						document.documentElement.classList.remove('light');
						document.documentElement.classList.add('dark');
					}

					expand = !expand;
				}}
				title="Change light and dark mode"
			>
				{#if $ae_loc.theme_mode == 'light'}
					<span class="inline-block" title="Light Mode">
						<Sun />
					</span>
					<span class="hidden group-hover:inline-block">Light Mode</span>
				{:else if $ae_loc.theme_mode == 'dark'}
					<span class="inline-block" title="Dark Mode">
						<Moon />
					</span>
					<span class="hidden group-hover:inline-block">Dark Mode</span>
				{/if}
			</button>
		{/if}
	</div>

	<!-- <section class="space-y-2">
    <h2 class="strong">Theme:</h2> -->
	<!-- Light/Dark Theme: -->
	<!-- <div>
<RadioGroup
    active="variant-glass-success"
    hover="hover:variant-ringed-surface"
    >
    <RadioItem
        onchange={() => {
            $slct_trigger = 'set_theme_mode';
        }}
        bind:group={$ae_loc.theme_mode}
        name="theme_light"
        value={'light'}
        >
        Light
    </RadioItem>
    <RadioItem
        onchange={() => {
            $slct_trigger = 'set_theme_mode';
        }}
        bind:group={$ae_loc.theme_mode}
        name="theme_dark"
        value={'dark'}
        >
        Dark
    </RadioItem>
</RadioGroup>
</div> -->
</section>
