<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 PageView from "./PageView.svelte";
    import type {PathSelectedEvent} from "../events/PathSelectedEvent";
    import {onMount} from "svelte";
    import NotificationModal from "./NotificationModal.svelte";

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

    let width: number = $state(0);
    let modalWidth = $derived(fState.xRefShowing || fState.notificationsShowing ? 281 : 0);
    let splitPanesWidth: number = $derived(width - modalWidth);

    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);
        };
    });

    function pathSelectedHandler(event: PathSelectedEvent) {
        fState.selectPathHandler(event);
    }
</script>

<div bind:clientWidth={width} class="file-view-container">
    <div
            class="flex flex-row"
            style="width: {splitPanesWidth}px; height: {height}px"
    >
        <Splitpanes theme="forge-movable" pushOtherPanes={false}>
            <Pane
                    size={fState.pageMode || fState.treeMode ? 15 : 0}
                    minSize={fState.pageMode || fState.treeMode ? 2 : 0}
                    maxSize={fState.pageMode || fState.treeMode ? 100 : 0}
            >
                <TreeView {fState} {height}></TreeView>
            </Pane>

            <Pane minSize={1}>
                <div class="bg-forge-dark w-full" style="height: {height}px">
                    {#if fState.treeMode}
                        <PrimitiveView {fState} {height}></PrimitiveView>
                    {/if}
                    {#if fState.pageMode}
                        <PageView {fState} {height}></PageView>
                    {/if}
                </div>
            </Pane>
        </Splitpanes>
    </div>
    {#if fState.xRefShowing}
        <div class="xref-modal" class:visible={fState.xRefShowing}>
            <XRefTable {fState} {height}></XRefTable>
        </div>
    {/if}
    {#if fState.notificationsShowing}
        <div class="xref-modal" class:visible={fState.notificationsShowing}>
            <NotificationModal {fState}></NotificationModal>
        </div>
    {/if}
</div>

<style lang="postcss">
    .file-view-container {
        position: relative;
        height: 100%;
        width: 100%;
    }

    .xref-modal {
        position: absolute;
        border-left: 1px solid var(--border-color);
        top: 0;
        right: 0;
        bottom: 0;
        width: 280px;
        background: var(--background-color);
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.2s ease-in-out;
    }

    .xref-modal.visible {
        transform: translateX(0);
    }
</style>
