<script lang="ts">
    import type FileViewState from "../models/FileViewState.svelte";
    import type { DetailPath } from "../models/Primitive.svelte";
    import PrimitiveIcon from "./PrimitiveIcon.svelte";

    class Path {
        public value: string;
        public jump?: string;

        constructor(value: string, jump?: string) {
            this.value = value;
            this.jump = jump;
        }
    }

    let {
        fState,
        footerHeight,
    }: { fState: FileViewState | undefined; footerHeight: number } = $props();
    let elements: Path[] | undefined = $derived(
        fState && fState.prim ? toElements(fState.prim.detail_path) : undefined,
    );

    $inspect(elements);
    $inspect(fState?.prim?.detail_path);
    function toElements(path: DetailPath[]): Path[] {
        if (path.length == 0) {
            return [{ value: "Trailer" } as Path];
        }

        let display: Path[] = [];
        if (path[0].key === "/") {
            display.push(new Path("Trailer"));
        } else {
            display.push(new Path(path[0].key, path[0].last_jump));
        }

        let lastJump = path[0].last_jump;

        for (const pathElement of path.slice(1, path.length)) {
            if (pathElement.last_jump !== lastJump) {
                lastJump = pathElement.last_jump;
                display.push(new Path(pathElement.key, lastJump));
            } else {
                display.push(new Path(pathElement.key, undefined));
            }
        }
        return display;
    }
</script>

<div
    class="bg-forge-prim border border-forge-bound"
    style="height: {footerHeight}px"
>
    <div class="m-1 flex flex-row">
        {#if elements}
            {#each elements as path}
            <button class="m-1 flex flex-row mt-auto mb-auto">
                {#if path.jump}
                    <div class="m-auto" style="height: {footerHeight}px">
                        <PrimitiveIcon ptype={"Reference"}></PrimitiveIcon>
                    </div>
                {/if}
                <p class="text-xs ml-1 c">{path.value}</p>
                </button>
            {/each}
        {/if}
    </div>
</div>

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