<script lang="ts">
	import { deleteEntry } from "$lib/api";
    import { credentials } from "$lib/stores";
	import { TITLED_ENTRIES } from "$lib/entry";
	import EntryKind from "./EntryKind.svelte";
	import { createEventDispatcher } from "svelte";

    let dispatch = createEventDispatcher()

    export let id: string;
    export let creationDate: Date;
    export let kind: "song" | "album" | "event" | "feeling" | "environment" | "date" | "memory";
    export let title: string | undefined;

    export let isExtended = false;
    let prevExtended = isExtended

    $: if (prevExtended !== isExtended) {
        dispatch(isExtended ? 'extended' : 'contracted', { id })
    }

    async function processDeletion(id: string) {
        await deleteEntry($credentials!, id);
        dispatch('deleted', {
            id,
        })
    }

    $: cardClass = () => {
        let cardClass = "border border-gray-200 rounded-lg shadow w-full flex p-3.5"

        if (isExtended) {
            cardClass += " flex-col gap-1.5"
        } else {
            if (TITLED_ENTRIES.includes(kind)) {
                cardClass += " flex-col"
            } else {
                cardClass += " gap-4 items-center"
            }
        }

        return cardClass
    };
</script>

<div class={cardClass()} id={`entry__${id}`}>
    <button on:click={() => { prevExtended = isExtended; isExtended = !isExtended }}>
        <div class="flex justify-between items-center">
            <div class="flex items-center gap-2.5">
                <EntryKind kind={kind}/>
                {#if title != null && isExtended}
                    <span>Created at: <time datetime={creationDate.toISOString()}>{creationDate.toLocaleDateString()}</time></span>
                {:else if title != null}
                    <h2 class="text-xl text-left font-semibold">{title}</h2>
                {:else if isExtended}
                    <span>Created at: <time datetime={creationDate.toISOString()}>{creationDate.toLocaleDateString()}</time></span>
                {/if}
            </div>
            {#if isExtended}
                <button on:click={() => processDeletion(id)} class="rounded-lg bg-red-600 text-white px-2.5 py-1.5 text-center hover:bg-red-700 focus:ring-4 focus:ring-violet-300">Delete entry</button>
            {/if}
        </div>
    
        {#if title != null && isExtended}
            <h2 class="text-xl text-left font-semibold mt-2">{title}</h2>
        {/if}
    </button>

    <slot/>

    {#if !isExtended}
        <slot name="contracted"/>
    {/if}

    {#if isExtended}
        <slot name="extended"/>
    {/if}
</div>