<script>
    import { faStar, faCaretUp, faCaretDown, faHeart, faCopy } from '@fortawesome/free-solid-svg-icons';
    import { Fa } from 'svelte-fa';
    import { PostMedia, Header } from '$lib/components';
    import { onMount } from 'svelte';
    import { TAG_TYPES } from '$lib/Tags';
    import { invoke } from '@tauri-apps/api/core';
    import { goto } from "$app/navigation";
    import { loading } from "$lib/stores.js";

    let { data } = $props();
    let post = $state(null);
    const tagTypes = Object.entries(TAG_TYPES);

    onMount(async () => {
        loading.set(true);
        post = await invoke('get_post', {postId: +data.postId});
        loading.set(false);
    });
</script>

<div class="grid [grid-template-areas:'header_header_header''main_main_aside']">
    <Header class="[grid-area:header]" back={2} onsubmit={(val = '') => {
        const queryParams = new URLSearchParams();
        queryParams.set('search', val);
        goto("/?" + queryParams.toString())
    }}></Header>

    <main class="[grid-area:main]">
        {#if post}
            <div class="flex flex-col">
                <section class="flex flex-col place-items-center bg-white">
                    <PostMedia class="object-contain" {post} />
                </section>
                <section class="flex flex-row justify-between bg-black">
                    <div class="flex flex-row px-2 gap-2">
                        <button class="py-2 px-3 flex flex-row place-items-center gap-1 text-white hover:text-black hover:bg-white">
                            <span class:accent-yellow-50={!post.is_favorited} class:accent-yellow-500={post.is_favorited}>
                                <Fa size={'1.5x'} icon={faHeart} />
                            </span>
                            &nbsp;
                            <span>
                                {post.fav_count}
                            </span>
                        </button>
                    <button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white">
                            <span class="text-secondary-500">
                                <Fa size={'1.5x'} icon={faStar} />
                            </span>
                            &nbsp;
                            {post.score.total}
                        </button>
                        <button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white">
                            <Fa size={'1.5x'} icon={faCaretUp} />
                        </button>
                        <button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white">
                            <Fa size={'1.5x'} icon={faCaretDown} />
                        </button>
                    </div>
                    <div class="flex flex-row px-2 gap-2">
                        <button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white"
                        onclick={async () => {await navigator.clipboard.writeText(`https://e621.net/posts/${post.id}`)}}>
                            <Fa size={'1.5x'} icon={faCopy} />
                        </button>
                        <button class="py-2 px-3 flex flex-row place-items-center text-white hover:text-black hover:bg-white">
                            ID: {post.id}
                        </button>
                    </div>
                </section>
                <footer class="card-footer py-4 px-2">
                    <h3 class="font-bold mb-2" class:line-through={post.description === ''} >Description</h3>
                    <p class="text-wrap">{post.description}</p>
                    <!--<pre>{JSON.stringify(post, null, 4)}</pre>-->
                </footer>
            </div>
        {/if}
    </main>

    <aside class="[grid-area:aside]">
        {#if post}
            <div class="p-2">
                {#each tagTypes as [name, label]}
                    {#if post.tags[name].length > 0}
                        <div class="mb-2">
                            <p class="font-bold">{label}</p>
                            {#each post.tags[name] as tag}
                                <p>{tag}</p>
                            {/each}
                        </div>
                    {/if}
                {/each}
            </div>
        {/if}
    </aside>
</div>

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