<script lang="ts">
    import {Pane, Splitpanes} from "svelte-splitpanes";
    import XRefTable from "./XRefTable.svelte";
    import PrimitiveView from "./PrimitiveView.svelte";
    import TreeView from "./TreeView.svelte";
    import type FileViewState from "../models/FileViewState.svelte";
    import {onMount} from 'svelte';
    import PageList from "./PageList.svelte";

    let {treeShowing, xrefTableShowing, pagesShowing, fState, height}: {
        treeShowing: boolean,
        xrefTableShowing: boolean,
        pagesShowing: boolean,
        fState: FileViewState,
        height: number
    } = $props()

    function handleKeydown(event: KeyboardEvent) {
        // Check for "Alt + Left Arrow"
        if (event.altKey && event.key === 'ArrowLeft') {
            fState.popPath();
        }
    }

    function handleMouseButton(event: MouseEvent) {
        // Check for mouse back button (button 4)
        if (event.button === 3) {
            fState.popPath();
        }
    }

    onMount(() => {
        window.addEventListener('keydown', handleKeydown);
        window.addEventListener('mousedown', handleMouseButton);

        return () => {
            window.removeEventListener('keydown', handleKeydown);
            window.removeEventListener('mousedown', handleMouseButton);
        };
    });
</script>

<Splitpanes theme="forge-movable">
    <Pane size={treeShowing || pagesShowing ? 15 : 0} minSize={treeShowing || pagesShowing ? 1 : 0} maxSize={treeShowing || pagesShowing ? 100 : 0}>
        <Splitpanes theme="forge-movable" horizontal>
            <Pane size={treeShowing ? pagesShowing ? 50 : 100 : 0} minSize={treeShowing ? 2 : 0} maxSize={treeShowing ? 100 : 0}>
                <TreeView {fState}></TreeView>
            </Pane>
            <Pane size={pagesShowing ? treeShowing ? 50 : 100 : 0} minSize={pagesShowing ? 2 : 0} maxSize={pagesShowing ? 100 : 0}>
                <PageList {fState}></PageList>
            </Pane>
        </Splitpanes>
    </Pane>


    <Pane minSize={1}>
        <div>
            <PrimitiveView {fState} {height}></PrimitiveView>
        </div>
    </Pane>

    <Pane size={xrefTableShowing ? 16 : 0} minSize={xrefTableShowing ? 1 : 0} maxSize={xrefTableShowing ? 100 : 0}>
        <XRefTable {fState}></XRefTable>
    </Pane>
</Splitpanes>
<style lang="postcss">

</style>