<script lang="ts">
    interface Props {
        log_lvl?: number;
        show?: boolean;
        tab?: string;
    }

    let {
        log_lvl = $bindable(0),
        show = $bindable(true),
        tab = $bindable('form') // form, local_json, session_json
    }: Props = $props();

    import {
        ArrowDown01,
        ArrowDown10,
        ArrowDownUp,
        BetweenVerticalEnd,
        BetweenVerticalStart,
        Bot,
        BookHeart,
        BookImage,
        Bookmark,
        BookOpenText,
        BriefcaseBusiness,
        CalendarClock,
        Check,
        Copy,
        Expand,
        Eye,
        EyeOff,
        Flag,
        FlagOff,
        FilePlus,
        Fingerprint,
        Globe,
        Library,
        MessageSquareWarning,
        Minus,
        Notebook,
        Pencil,
        Plus,
        RefreshCcw,
        RemoveFormatting,
        SquareLibrary,
        Shapes,
        Share2,
        ShieldCheck,
        ShieldMinus,
        Siren,
        Skull,
        Tags,
        Target,
        ToggleLeft,
        ToggleRight,
        Trash2,
        TypeOutline,
        X
    } from '@lucide/svelte';
    import { Modal } from 'flowbite-svelte';

    import {
        ae_snip,
        ae_loc,
        ae_sess,
        ae_api,
        ae_trig,
        slct,
        slct_trigger
    } from '$lib/stores/ae_stores';
    import {
        journals_loc,
        journals_sess,
        journals_slct,
        journals_prom,
        journals_trig
    } from '$lib/ae_journals/ae_journals_stores';
    import E_app_codemirror_v5 from '$lib/app_components/e_app_codemirror_v5.svelte';
</script>

<Modal
    bind:open={show}
    autoclose={false}
    placement="top-center"
    size="xl"
    class="
        top-center
        relative
        flex flex-col
        mx-auto w-full
        bg-white dark:bg-gray-800
        text-gray-800 dark:text-gray-200
        border border-orange-300 dark:border-orange-700 rounded-lg
        shadow-xl
        "
    headerClass="
        flex flex-row gap-2 items-center justify-between
        w-full
        bg-orange-100 dark:bg-orange-900
        "
    footerClass="
        flex flex-row gap-2 items-center justify-center
        w-full
        bg-orange-100 dark:bg-orange-900
        "
>
    {#snippet header()}
        <h3>
            <span class="text-base font-semibold">
                <span class="text-primary-500">
                    <BookOpenText class="inline-block mr-1" />
                </span>
                &AElig; Journals Settings:
            </span>
            {$journals_loc?.name ?? '-- not set --'}
        </h3>
    {/snippet}

    <div class="modal h-full md:pb-24">
        <div class="modal-box space-y-2">
            <!-- Menu to toggle between viewing JSON and the form view -->
            <div class="flex flex-row gap-1 items-center justify-center">
                <button
                    type="button"
                    class:preset-outlined-surface-200-800={tab === 'form'}
                    class="
            btn btn-sm
            preset-outlined-surface-50-950
            transition-all
            "
                    onclick={() => (tab = 'form')}
                >
                    <span class="fas fa-cog mr-1"></span>
                    Config
                </button>
                <button
                    type="button"
                    class:preset-outlined-surface-200-800={tab === 'local_json'}
                    class="
            btn btn-sm
            preset-outlined-surface-50-950
            transition-all
            "
                    onclick={() => (tab = 'local_json')}
                >
                    <span class="fas fa-code mr-1"></span>
                    Local JSON
                </button>
                <button
                    type="button"
                    class:preset-outlined-surface-200-800={tab === 'session_json'}
                    class="
            btn btn-sm
            preset-outlined-surface-50-950
            transition-all
            "
                    onclick={() => (tab = 'session_json')}
                >
                    <span class="fas fa-code mr-1"></span>
                    Session JSON
                </button>
            </div>

            <!-- Section for the configuration form -->
            <div
                class:hidden={tab !== 'form'}
                class="flex flex-col gap-6 items-start justify-start p-2"
            >
                <div class="w-full space-y-4">
                    <h2 class="h2 text-xl font-bold flex items-center gap-2 border-b border-surface-500/30 pb-2">
                        <CalendarClock class="text-primary-500" />
                        Date and Time Settings
                    </h2>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <label class="label">
                            <span>DateTime Format</span>
                            <select
                                bind:value={$journals_loc.datetime_format}
                                class="select"
                            >
                                <option value="datetime_12_short">MMM D, YY hh:mm A</option>
                                <option value="datetime_12_long">MMMM D, YYYY hh:mm A</option>
                                <option value="datetime_short">MMM D, YY HH:mm</option>
                                <option value="datetime_long">MMMM D, YYYY HH:mm</option>
                                <option value="datetime_us">US (MM/DD/YYYY hh:mm:ss A)</option>
                                <option value="datetime_iso">ISO (YYYY-MM-DD HH:mm:ss)</option>
                            </select>
                        </label>

                        <label class="label">
                            <span>Time Format</span>
                            <select
                                bind:value={$journals_loc.time_format}
                                class="select"
                            >
                                <option value="time_12_short">12-hour short (e.g., 3:30 PM)</option>
                                <option value="time_12_long">12-hour long (e.g., 3:30:45 PM)</option>
                                <option value="time_short">24-hour short (e.g., 15:30)</option>
                                <option value="time_long">24-hour long (e.g., 15:30:45)</option>
                            </select>
                        </label>
                    </div>
                </div>
            </div>

            <!-- Section for viewing (and direct editing???) the raw localStorage JSON configuration -->
            <div class:hidden={tab !== 'local_json'} class="">
                <E_app_codemirror_v5
                    editable={false}
                    readonly={true}
                    content={JSON.stringify($journals_loc, null, 2)}
                    show_line_numbers={false}
                    placeholder=""
                    class="
            p-1
            preset-outlined-surface-100-900
            rounded-lg
            "
                />
                <!-- <pre class="text-wrap">
    {JSON.stringify($journals_loc, null, 2)}
    </pre> -->
            </div>

            <!-- Section for viewing (and direct editing???) the raw sessionStorage JSON configuration -->
            <div class:hidden={tab !== 'session_json'} class="">
                <E_app_codemirror_v5
                    editable={false}
                    readonly={true}
                    content={JSON.stringify($journals_sess, null, 2)}
                    show_line_numbers={false}
                    placeholder=""
                    class="
            p-1
            preset-outlined-surface-100-900
            rounded-lg
            "
                />
                <!-- <pre class="text-wrap">
    {JSON.stringify($journals_sess, null, 2)}
    </pre> -->
            </div>
        </div>
    </div>

    {#snippet footer()}
        <button class="btn btn-sm btn-outline btn-primary" onclick={() => (show = false)}>
            <X class="inline-block mr-1" />
            Close
        </button>
    {/snippet}
</Modal>
