<script lang="ts">
    const rowHeight = 24;

    import PrimitiveIcon from "./PrimitiveIcon.svelte";
    import type {TreeViewModel} from "../models/TreeViewModel";
    import {CaretDownOutline, CaretRightOutline} from "flowbite-svelte-icons";

    let {entry, onclick = undefined}: { entry: TreeViewModel, onclick: any } = $props();


    function formatDisplayKey(key: string) {
        if (key.startsWith("Page") && !key.startsWith("Pages")) {
            return key.replace("Page", "Page ");
        }
        return key;
    }
</script>
{#if entry.depth == 0}
    <div
            style="height: 1px; width: 100%;"
            class="bg-forge-bound"
    ></div>
{/if}
<button
        class="row text-sm hover:bg-forge-sec w-full group whitespace-nowrap"
        style="height: {rowHeight}px;"
        onclick={onclick}
>
    <div style="margin-left: {entry.depth * 1.25}em">
        {#if entry.container}
            <div class="caret group-hover:text-forge-text_hint">
                {#if entry.expanded}
                    <CaretDownOutline />
                {:else}
                    <CaretRightOutline />
                {/if}

            </div>
        {:else}
            <span class="no-caret"></span>
        {/if}
    </div>
    <div>
        <PrimitiveIcon ptype={entry.ptype}/>
    </div>
    <div class="pl-1 prim_name whitespace-nowrap">
        <p>
            {formatDisplayKey(entry.key)}
        </p>
        <div
                class="details group-hover:text-forge-text_hint"
        >
            {" | " +
            entry.value +
            " | " +
            entry.sub_type +
            " | " +
            entry.ptype}
        </div>
    </div>
</button>

<style lang="postcss">
    .prim_name {
        display: flex;
        flex-direction: row;
        bottom: 0;
        width: 100%;
        text-align: center;
    }

    .caret {
        @apply text-forge-sec align-middle;
        cursor: pointer;
        user-select: none;
        align-items: center;
    }

    .details {
        @apply ml-1 text-forge-prim whitespace-nowrap font-extralight;
    }

    .row {
        text-align: center;
        display: flex;
        flex-direction: row;
        user-select: none;
    }

    .no-caret {
        @apply pl-5;
        user-select: none;
    }
</style>