<script>
    import {
        AppRail,
        AppRailAnchor,
        AppShell,
        Modal,
        getDrawerStore,
        getModalStore,
        Drawer
    } from '@skeletonlabs/skeleton';
    import {faCode, faGear} from '@fortawesome/free-solid-svg-icons';
    import { Fa } from 'svelte-fa';
    import BackAppRailAnchor from "$lib/components/BackAppRailAnchor.svelte";
    export let data;

    let drawerStore = getDrawerStore();
    let modalStore = getModalStore();

    const tagTypes = Object.entries({
        artist: 'Artist',
        character: 'Character',
        copyright: 'Copyright',
        general: 'General',
        lore: 'Lore',
        meta: 'Meta',
        invalid: 'Invalid'
    });
</script>

<Modal />
<Drawer>

</Drawer>
<AppShell>
    <svelte:fragment slot="sidebarRight">
        <div class="p-2 h-dvh">
            {#each tagTypes as [name, label]}
                <div class="mb-2">
                    <p class="font-bold">{label}</p>
                    {#each data.post.tags[name] as tag}
                        <p>{tag}</p>
                    {/each}
                </div>
            {/each}
        </div>
    </svelte:fragment>
    <svelte:fragment slot="sidebarLeft">
        <AppRail height="h-dvh">
            <svelte:fragment slot="lead">
                <BackAppRailAnchor popCount={2} />
            </svelte:fragment>
            <svelte:fragment slot="trail">
                <!-- <AppRailAnchor on:click={() => modalStore.trigger({body: JSON.stringify(data.post, null, 2)})}>
                    <div class="flex flex-col gap-2 place-content-center">
                        <Fa size={'2x'} icon={faCode} />
                        <p>Post data</p>
                    </div>
                </AppRailAnchor> -->
                <AppRailAnchor on:click={() => drawerStore.open()}>
                    <div class="flex flex-col gap-2 place-content-center">
                        <Fa size={'2x'} icon={faGear} />
                        <p>Settings</p>
                    </div>
                </AppRailAnchor>
            </svelte:fragment>
        </AppRail>
    </svelte:fragment>
    <svelte:fragment slot="default">
        <div class="max-h-dvh container mx-auto p-2">
            <div class="flex flex-row place-content-center">
                {#if data?.post?.preview?.has}
                    <img class="mb-2" src={data.post.preview.url} alt={`Post ${data.post.id}`} />
                {:else}
                    <img class="mb-2" src={data.post.file.url} alt={`Post ${data.post.id}}`} />
                {/if}
            </div>
            <div class="card">
                <header class="px-3 pt-2">
                    <p class="font-bold">Description</p>
                </header>
                <section class="p-3">
                    <p>{data.post.description}</p>
                </section>
            </div>
            <!-- <div>
                <pre>
                    {JSON.stringify(data, null, 2)}
                </pre>
            </div>-->
        </div>
    </svelte:fragment>
</AppShell>

<style lang="postcss"></style>
