<!--
  -   This file is a part of the SteamWar software.
  -
  -   Copyright (C) 2025 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 { Button } from "@components/ui/button";
    import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell, TableCaption } from "@components/ui/table";
    import { eventRepo } from "@repo/event";
    import { Popover, PopoverContent, PopoverTrigger } from "@components/ui/popover";
    import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@components/ui/command";
    import { teams } from "@components/stores/stores";
    import type { EventModel } from "./eventmodel.svelte";

    let { event = $bindable() }: { event: EventModel } = $props();

    async function addTeam(value: number) {
        await $eventRepo.updateTeams(event.event.id.toString(), [value]);
        event.teams = await $eventRepo.listTeams(event.event.id.toString());
    }

    async function removeTeam(value: number) {
        await $eventRepo.deleteTeams(event.event.id.toString(), [value]);
        event.teams = await $eventRepo.listTeams(event.event.id.toString());
    }

    let teamSearch = $state("");
</script>

<Table>
    <TableHeader>
        <TableRow>
            <TableHead>Team</TableHead>
            <TableHead>Name</TableHead>
            <TableHead>Action</TableHead>
        </TableRow>
    </TableHeader>
    <TableBody>
        {#each event.teams as t (t.id)}
            <TableRow>
                <TableCell>{t.kuerzel}</TableCell>
                <TableCell>{t.name}</TableCell>
                <TableCell>
                    <Button onclick={() => removeTeam(t.id)} variant="outline" size="sm">{t.name} abmelden</Button>
                </TableCell>
            </TableRow>
        {/each}
        {#if event.teams.length === 0}
            <TableRow>
                <TableCell class="text-center col-span-3">No teams available</TableCell>
            </TableRow>
        {/if}
    </TableBody>
    <Popover>
        <TableCaption>
            <PopoverTrigger>
                <Button>Team Anmelden</Button>
            </PopoverTrigger>
        </TableCaption>
        <PopoverContent class="p-0">
            <Command shouldFilter={false}>
                <CommandInput bind:value={teamSearch} placeholder="Search teams..." />
                <CommandList>
                    <CommandEmpty>No teams found :(</CommandEmpty>
                    <CommandGroup heading="Teams">
                        {#each $teams
                            .filter((v) => v.name.includes(teamSearch))
                            .filter((v) => !event.teams.some((k) => k.id === v.id))
                            .filter((v, i) => i < 50) as t (t.id)}
                            <CommandItem value={t.id.toString()} onSelect={() => addTeam(t.id)} keywords={[t.name, t.kuerzel]}>{t.name}</CommandItem>
                        {/each}
                    </CommandGroup>
                </CommandList>
            </Command>
        </PopoverContent>
    </Popover>
</Table>
