<script lang="ts">
    import TreeViewState from "../models/TreeViewState.svelte";
    import {PathSelectedEvent} from "../events/PathSelectedEvent";
    import type FileViewState from "../models/FileViewState.svelte";
    import type {TreeViewModel} from "../models/TreeViewModel";
    import TreeViewEntry from "./TreeViewEntry.svelte";
    import {onMount} from "svelte";

    let {
        fState,
        height,
    }: {
        fState: FileViewState;
        height: number;
    } = $props();

    const file_id = $derived(fState.file.id);

    let scrollY = $state(0);

    let treeState: TreeViewState | undefined = $state(fState.treeState);

    let fillerHeight: number = $derived(
        treeState ? treeState.filler_height : 0,
    );
    let totalHeight: number = $derived(treeState ? treeState.total_height : 0);
    let entries: TreeViewModel[] = $derived(treeState ? treeState.entries : []);
    let stickies: TreeViewModel[] = $derived(
        treeState ? treeState.stickies : [],
    );

    onMount(() => {
            scrollY = Math.min(scrollY, totalHeight);
            treeState?.loadTreeView(scrollY, height);
        }
    )

    $effect(() => {
            treeState = fState.treeState;
            if (treeState) {
                scrollY = Math.min(scrollY, totalHeight);
                treeState.updateTreeView(scrollY, height);
            }
        }
    )

    function handleSelect(prim: TreeViewModel) {
        if (prim.expanded && prim.container) {
            treeState
                ?.collapseTree(prim.path.map((path) => path.key))
                .then(() => {
                    treeState?.updateTreeView(scrollY, height);
                });
            return;
        } else if (prim.container) {
            treeState
                ?.expandTree(prim.path.map((path) => path.key))
                .then(() => {
                    treeState?.updateTreeView(scrollY, height);
                });
        }
        fState.selectPathHandler(
            new PathSelectedEvent(
                file_id,
                prim.path.map((path) => path.key),
            ),
        );
        treeState?.updateTreeView(scrollY, height);
    }

    function handleScroll(event: Event & { currentTarget: HTMLElement }) {
        scrollY = event.currentTarget.scrollTop;
        treeState?.updateTreeView(scrollY, height);
    }
</script>

<div onscroll={handleScroll} class="overflow-auto" style="height: {height}px">
    {#if entries}
        <div style="height: {totalHeight}px; width: 100%">
            <table
                    class="border-b-2 border-forge-bound bg-forge-prim"
                    style="position: relative; top: {scrollY}px"
            >
                <thead>
                <tr>
                    {#each stickies as entry}
                        {#if entry.active}
                            <TreeViewEntry
                                    {entry}
                                    onclick={() => handleSelect(entry)}
                            ></TreeViewEntry>
                        {/if}
                    {/each}
                </tr>
                </thead>
            </table>
            <div
                    class="filler"
                    style="height: {fillerHeight}px; width: 100%"
            ></div>
            <div>
                {#each entries as entry}
                    {#if entry.active}
                        <TreeViewEntry
                                onclick={() => handleSelect(entry)}
                                {entry}
                        ></TreeViewEntry>
                    {/if}
                {/each}
            </div>
        </div>
    {/if}
</div>

<style lang="postcss">

</style>
