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

    let {fStates, fState, selectTab, closeTab, openTab}:
        { fStates: FileViewState[],
            fState: FileViewState | undefined,
            selectTab: (arg0: FileViewState) => void,
            closeTab: (arg0: FileViewState) => void,
            openTab: () => void } = $props();

    function formatFileName(name: string) {
        if (name.length < 20) {
            return name;
        }
        return name.substring(0, 17) + "..."
    }
</script>
<div class="tab-bar">
    {#each fStates as state, index (index)}
        <div class={state.file.id === fState?.file.id ? "tab-outer  bg-forge-prim border-b-2 border-forge-acc" : "tab-outer bg-forge-dark"}>
            <div class="tab-text">
                <button onclick={() => selectTab(state)} class="tab-click">
                    {formatFileName(state.file.name)}
                </button>
            </div>
            <div class="justify-center flex">
                <button onclick={() => closeTab(state)} class="rounded-md hover:bg-forge-active">
                    <CloseOutline size="xs" color="custom"/>
                </button>
            </div>
        </div>
    {/each}
    <div class="justify-center flex">
        <button onclick={openTab} class="rounded hover:bg-forge-active">
            <PlusOutline size="sm"/>
        </button>
    </div>
</div>
<style lang="postcss">
    .tab-bar {
        @apply border-b border-forge-bound bg-forge-dark;
        height: 30px;
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }

    .tab-text {
        @apply text-forge-text text-xs whitespace-nowrap col-span-5 justify-center flex pr-1;
    }

    .tab-outer {
        @apply grid grid-rows-1 grid-cols-6 hover:bg-forge-prim pl-2 pr-1;
        text-align: center;
        height: 30px;
        max-width: 150px;
        transition: background-color;
    }

    .tab-click {
        @apply m-0 p-0;
        height: 100%;
        width: 100%;
    }

    .file-tab {
        @apply bg-forge-dark
        rounded-none
        text-xs
    }

    .file-tab.active {
        @apply bg-forge-active
    }

</style>