<script>
    import { RangeSlider, Tab, TabGroup, InputChip, SlideToggle } from '@skeletonlabs/skeleton';
    import { imageGridColumns, postGridPreviewQuality, blacklist, limitImageHeight } from '$lib/settings';

    let tabPos = $state(0);
    let showApikey = $state(false);
    let apikey = $state('');
</script>
<div class="flex flex-col">
    <h2 class="h2 mb-2 text-dark-token">Settings</h2>
    <TabGroup>
        <Tab class="text-dark-token" bind:group={tabPos} name="tab1" value={0}>Display</Tab>
        <Tab class="text-dark-token" bind:group={tabPos} name="tab2" value={1}>API</Tab>
        <Tab class="text-dark-token" bind:group={tabPos} name="tab3" value={2}>User</Tab>
        <Tab class="text-dark-token" bind:group={tabPos} name="tab4" value={3}>Chats</Tab>

        {#snippet panel()}
            
                {#if tabPos === 0}
                    <div class="flex flex-col gap-3">
                        <h3 class="h3 text-dark-token font-bold">Image</h3>
                        <SlideToggle name="image-limit-height" bind:checked={$limitImageHeight}><span class="text-dark-token">Limit image height</span></SlideToggle>

                        <h3 class="h3 text-dark-token font-bold">Grid</h3>
                        <div class="basis-1/2">
                            <RangeSlider accent="text-dark-token" name="grid-columns" min={1} max={12} bind:value={$imageGridColumns} ticked={true}>
                                <div class="flex flex-grow justify-between items-center dark">
                                    <div class="text-dark-token font-bold mb-1">Grid Columns</div>
                                    <div class="text-xs text-dark-token">{$imageGridColumns} / {12}</div>
                                </div>
                            </RangeSlider>
                        </div>
                        <div class="basis-1/2">
                            <label class="label">
                                <span class="text-dark-token font-bold">Preview type</span>
                                <select class="select" bind:value={$postGridPreviewQuality}>
                                    <option value="preview">Preview</option>
                                    <option value="sample">Sample</option>
                                </select>
                            </label>
                        </div>
                    </div>
                {/if}

                {#if tabPos === 1}
                    <div class="flex flex-col gap-3">
                        <div class="">
                            <label class="label">
                                <span class="text-dark-token font-bold">e621 Username</span>
                                <input class="input" />
                            </label>
                        </div>
                        <div class="">
                            <label class="label">
                                <span class="text-dark-token font-bold">e621 Apikey</span>
                                {#if showApikey}
                                    <input class="input" type="text" bind:value={apikey} />
                                {:else}
                                    <input class="input" type="password" bind:value={apikey} />
                                {/if}
                            </label>
                            <label class="label">
                                <span class="text-dark-token font-bold">Show apikey</span>
                                <input class="checkbox" type="checkbox" bind:checked={showApikey} />
                            </label>
                        </div>
                    </div>
                {/if}

                {#if tabPos === 2}
                    <div class="flex flex-col gap-3">
                        <div class="">
                            <p class="text-dark-token font-bold">Blacklist</p>
                            <InputChip name="blacklist" label="Blacklist" bind:value={$blacklist} />
                        </div>
                    </div>
                {/if}

                {#if tabPos === 3}
                    <div class="flex flex-col gap-3">
                        <div class="">
                            <p class="text-dark-token font-bold">Chats</p>
                            <InputChip name="blacklist" label="Blacklist" bind:value={$blacklist} />
                        </div>
                    </div>
                {/if}
            
            {/snippet}
    </TabGroup>
</div>