<script lang="ts">
    import { BookOpenSolid, CodeBranchSolid } from "flowbite-svelte-icons";
    import type FileViewState from "../models/FileViewState.svelte";

    let {
        fState
    }: { fState: FileViewState | undefined } = $props();

    function toggleTree() {
        if (!fState) return;
        fState.treeMode = !fState.treeMode;
        if (fState.treeMode) {
            fState.pageMode = false;
        }
    }

    function togglePages() {
        if (!fState) return;
        fState.pageMode = !fState.pageMode;
        if (fState.pageMode) {
            fState.treeMode = false;
        }
    }
</script>

<div class="grid grid-cols-1">
    <button
        class={fState?.treeMode ? "tool-button active" : "tool-button"}
        onclick={toggleTree}
    >
        <div class="justify-center flex m-0">
            <CodeBranchSolid class="rotate-180 scale-x-[-1]" />
        </div>
        <b class="button-title">Tree</b>
    </button>
    <button
        id="#page"
        class={fState?.pageMode ? "tool-button active" : "tool-button"}
        onclick={togglePages}
    >
        <div class="justify-center flex">
            <BookOpenSolid />
        </div>
        <b class="button-title">Page</b>
    </button>
</div>

<style lang="postcss">
    .button-title {
        @apply text-forge-text_sec text-xs;
    }

    .tool-button {
        @apply rounded mt-2 mb-2 bg-forge-prim hover:bg-forge-sec;
        height: 60px;
    }

    .tool-button.active {
        @apply bg-forge-active focus:bg-forge-acc;
    }
</style>
