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

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

    function toggleXref() {
        if (!fState) return;
        if (fState.notificationsShowing) {
            fState.notificationsShowing = false;
        }
        if (fState.changesShowing) {
            fState.changesShowing = false
        }
        fState.xRefShowing = !fState.xRefShowing;
    }

    function toggleNots() {
        if (!fState) return;
        if (fState.xRefShowing) {
            fState.xRefShowing = false;
        }
        if (fState.changesShowing) {
            fState.changesShowing = false
        }
        fState.notificationsShowing = !fState.notificationsShowing;
    }

    function toggleChanges() {
        if (!fState) return;
        if (fState.xRefShowing) {
            fState.xRefShowing = false;
        }
        if (fState.notificationsShowing) {
            fState.notificationsShowing = false;
        }
        fState.changesShowing = !fState.changesShowing;
    }

</script>
<div class="grid grid-cols-1">

    <button class={ fState?.xRefShowing ? "tool-button active" : "tool-button" } onclick={toggleXref}>
        <div class="justify-center flex text-forge-text">
            <ListOutline/>
        </div>
        <b class="button-title">XRef</b>
    </button>

    <button class={ fState?.notificationsShowing ? "tool-button active" : "tool-button" } onclick={toggleNots}>
        <div class="justify-center flex text-forge-text">
            <InfoCircleOutline/>
        </div>
        <b class="button-title">Notifications</b>
    </button>

    <button class={ fState?.changesShowing ? "tool-button active" : "tool-button" } onclick={toggleChanges}>
        <div class="justify-center flex text-forge-text">
            <UndoOutline/>
        </div>
        <b class="button-title">Changes</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>