<!--
  -   This file is a part of the SteamWar software.
  -
  -   Copyright (C) 2023 SteamWar.de-Serverteam
  -
  -   This program is free software: you can redistribute it and/or modify
  -   it under the terms of the GNU Affero General Public License as published by
  -   the Free Software Foundation, either version 3 of the License, or
  -   (at your option) any later version.
  -
  -   This program is distributed in the hope that it will be useful,
  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  -   GNU Affero General Public License for more details.
  -
  -   You should have received a copy of the GNU Affero General Public License
  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  -->

<script lang="ts">
  import { preventDefault } from 'svelte/legacy';

    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 "@type/schem.ts";
    import SchematicInfo from "./SchematicInfo.svelte";
    import UploadModal from "./UploadModal.svelte";
    import type {Player} from "@type/data.ts";
    import SWButton from "../styled/SWButton.svelte";
    import SWPaginator from "@components/styled/SWPaginator.svelte";

    const dispatch = createEventDispatcher();

  interface Props {
    schematics: SchematicList;
    user: Player;
  }

  let { schematics, user }: Props = $props();

    let infoModalId: number | null = $state(null);

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

    let page = $state(0);
    let maxPage = $derived(Math.ceil(schematics.schematics.length / 15));
    let pagedSchematics = $derived(schematics.schematics.slice(page * 15, (page + 1) * 15));

</script>

<div class="flex justify-between">
    <Breadcrumb navClass="py-4">
        <BreadcrumbItem home>
            {#snippet icon()}
          
                  <HomeOutline  class="w-6 h-6 mx-2 dark:text-white" />
              
          {/snippet}
            <span onclick={() => dispatch("reset")} class="hover:underline hover:cursor-pointer text-2xl">{t("dashboard.schematic.home")}</span>
        </BreadcrumbItem>
        {#each schematics.breadcrumbs as bread (bread.id)}
            <BreadcrumbItem>
                {#snippet icon()}
              
                      <ChevronDoubleRightOutline class="w-4 h-4 mx-2 dark:text-white" />
                  
              {/snippet}
                <span onclick={() => {
                    page = 0;
                    dispatch("to", {id: bread.id});
                }} class="hover:underline hover:cursor-pointer text-2xl">{bread.name}</span>
            </BreadcrumbItem>
        {/each}
    </Breadcrumb>
</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 onclick={preventDefault(() => {
                            if (schematics.breadcrumbs.length === 1) {
                                page = 0;
                                dispatch("reset")
                            } else {
                                page = 0;
                                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 pagedSchematics as schem (schem.id)}
        <SchematicListTile schem={schem} players={schematics.players} onclick={schemListClick(schem.type == null, schem.id)} />
    {/each}
    </tbody>
</table>

<SWPaginator bind:page maxPage={maxPage} />

{#if infoModalId !== null}
    <SchematicInfo schematicId={infoModalId} {user} 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>