<!--
  -   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 { Table, TableBody, TableCell, TableCaption, TableHead, TableHeader, TableRow } from "@components/ui/table";
    import { Button } from "@components/ui/button/index.js";
    import type { ExtendedEvent } from "@type/event.ts";
    import { eventRepo } from "@repo/event";
    import PlayerSelector from "@components/ui/PlayerSelector.svelte";

    const { event }: { event: ExtendedEvent } = $props();

    let referees = $state(event.referees);

    async function addReferee(value: string) {
        await $eventRepo.updateReferees(event.event.id.toString(), [value]);
        referees = await $eventRepo.listReferees(event.event.id.toString());
    }

    async function removeReferee(value: string) {
        await $eventRepo.deleteReferees(event.event.id.toString(), [value]);
        referees = await $eventRepo.listReferees(event.event.id.toString());
    }
</script>

<Table>
    <TableHeader>
        <TableRow>
            <TableHead>Name</TableHead>
            <TableHead>Actions</TableHead>
        </TableRow>
    </TableHeader>
    <TableBody>
        {#each referees as referee (referee.uuid)}
            <TableRow>
                <TableCell>{referee.name}</TableCell>
                <TableCell>
                    <Button onclick={() => removeReferee(referee.uuid)} variant="outline" size="sm">{referee.name} entfernen</Button>
                </TableCell>
            </TableRow>
        {/each}
    </TableBody>
    <TableCaption>
        <PlayerSelector placeholder="Hinzufügen" onSelect={(player) => addReferee(player.uuid)} />
    </TableCaption>
</Table>
