<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 as HTMLInputElement).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>
