<script lang="ts">
    import {t} from "astro-i18n";
    import {ChevronDoubleRightOutline, FolderOutline, HomeOutline, InfoCircleOutline} from "flowbite-svelte-icons";
    import SchematicListTile from "./SchematicListTile.svelte";
    import {Breadcrumb, BreadcrumbItem, Tooltip} from "flowbite-svelte";
    import {createEventDispatcher} from "svelte";
    import type {SchematicList} from "../types/schem.ts";
    import SchematicInfo from "./SchematicInfo.svelte";
    import UploadModal from "./UploadModal.svelte";

    const dispatch = createEventDispatcher();

    export let schematics: SchematicList;

    let uploadOpen = false;
    let infoModalId: number | null = null;

    function schemListClick(isDir: boolean, id: number) {
        if (isDir) {
            return () => dispatch("to", {id})
        } else {
            return () => infoModalId = id
        }
    }
</script>

<div class="flex justify-between">
    <Breadcrumb navClass="py-4">
        <BreadcrumbItem home>
            <svelte:fragment slot="icon">
                <HomeOutline  class="w-6 h-6 mx-2 dark:text-white" />
            </svelte:fragment>
            <span on:click={() => dispatch("reset")} class="hover:underline hover:cursor-pointer text-2xl">{t("dashboard.schematic.home")}</span>
        </BreadcrumbItem>
        {#each schematics.breadcrumbs as bread}
            <BreadcrumbItem>
                <svelte:fragment slot="icon">
                    <ChevronDoubleRightOutline class="w-4 h-4 mx-2 dark:text-white" />
                </svelte:fragment>
                <span on:click={() => dispatch("to", {id: bread.id})} class="hover:underline hover:cursor-pointer text-2xl">{bread.name}</span>
            </BreadcrumbItem>
        {/each}
    </Breadcrumb>
    <div class="flex flex-col justify-center">
        <button class="btn" on:click={() => uploadOpen = true}>
            {t("dashboard.schematic.upload")}
        </button>
    </div>
</div>
<table>
    <tbody>
    <tr class="!cursor-auto">
        <th>{t("dashboard.schematic.head.type")}</th>
        <th>{t("dashboard.schematic.head.name")}</th>
        <th class="hidden sm:table-cell">{t("dashboard.schematic.head.owner")}</th>
        <th class="hidden sm:table-cell"></th>
        <th class="hidden md:table-cell">{t("dashboard.schematic.head.updated")}</th>
        <th>
            <InfoCircleOutline />
            <Tooltip>
                <span>{t("dashboard.schematic.head.replaceColor")}</span>
            </Tooltip>
        </th>
        <th>
            <InfoCircleOutline />
            <Tooltip>
                <span>{t("dashboard.schematic.head.allowReplay")}</span>
            </Tooltip>
        </th>
    </tr>
    {#if schematics.breadcrumbs.length !== 0}
        <tr on:click|preventDefault={() => {
                            if (schematics.breadcrumbs.length === 1) {
                                dispatch("reset")
                            } else {
                                dispatch("to", {id: schematics.breadcrumbs[schematics.breadcrumbs.length - 2].id})
                            }
                        }}>
            <th>
                <FolderOutline />
            </th>
            <th>../</th>
            <th class="hidden sm:table-cell"></th>
            <th class="hidden sm:table-cell">{t("dashboard.schematic.dir")}</th>
            <th class="hidden md:table-cell"></th>
            <th></th>
            <th></th>
        </tr>
    {/if}
    {#each schematics.schematics as schem}
        <SchematicListTile schem={schem} players={schematics.players} on:click={schemListClick(schem.type == null, schem.id)} />
    {/each}
    </tbody>
</table>

<UploadModal bind:open={uploadOpen} on:refresh />

{#if infoModalId !== null}
    <SchematicInfo schematicId={infoModalId} on:reset={() => infoModalId = null} />
{/if}

<style lang="postcss">
  table {
    @apply w-full;
  }

  tr {
    @apply transition-colors cursor-pointer border-b
        dark:hover:bg-gray-800 hover:bg-gray-300;
  }

  th {
    @apply text-left py-4 md:px-2;
  }
</style>