<!--
  -   This file is a part of the SteamWar software.
  -
  -   Copyright (C) 2024 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 type { ExtendedEvent } from "@type/event.ts";
    import { Button } from "flowbite-svelte";
    import { PlusOutline } from "flowbite-svelte-icons";
    import SWModal from "@components/styled/SWModal.svelte";
    import SWButton from "@components/styled/SWButton.svelte";
    import PlayerSelector from "@components/ui/PlayerSelector.svelte";
    import { eventRepo } from "@repo/event.ts";

    interface Props {
        data: ExtendedEvent;
    }

    let { data }: Props = $props();

    let searchValue = $state("");
    let selectedPlayer: string | null = $state(null);

    let referees = $state(data.event.referees);

    let showAdd = $state(false);

    async function addReferee() {
        if (selectedPlayer) {
            referees = (
                await $eventRepo.updateEvent(data.event.id.toString(), {
                    deadline: null,
                    end: null,
                    maxTeamMembers: null,
                    name: null,
                    publicSchemsOnly: null,
                    removeReferee: null,
                    schemType: null,
                    start: null,
                    addReferee: [selectedPlayer],
                })
            ).referees;
        }

        reset();
    }

    function removeReferee(id: string) {
        return async () => {
            referees = (
                await $eventRepo.updateEvent(data.event.id.toString(), {
                    deadline: null,
                    end: null,
                    maxTeamMembers: null,
                    name: null,
                    publicSchemsOnly: null,
                    addReferee: null,
                    schemType: null,
                    start: null,
                    removeReferee: [id],
                })
            ).referees;
        };
    }

    function reset() {
        selectedPlayer = null;
        searchValue = "";
    }
</script>

<ul class="mx-4 my-2 divide-y divide-neutral-600">
    {#each referees as referee}
        <li class="flex flex-grow justify-between">
            {referee.name}
            <SWButton onclick={removeReferee(referee.uuid)}>Entfernen</SWButton>
        </li>
    {/each}

    {#if referees.length === 0}
        <li>Keine Schiedsrichter</li>
    {/if}
</ul>

<Button class="fixed bottom-6 right-6 !p-4 z-10 shadow-lg" onclick={() => (showAdd = true)}>
    <PlusOutline />
</Button>

<SWModal title="Schiedsrichter hinzufügen" bind:open={showAdd}>
    <div class="flex flex-grow justify-center h-80">
        <div>
            <PlayerSelector bind:value={selectedPlayer} placeholder="Search player..." />
        </div>
    </div>
    {#snippet footer()}
        <div class="flex flex-grow justify-end">
            <SWButton onclick={reset} type="gray">Abbrechen</SWButton>
            <SWButton onclick={addReferee}>Hinzufügen</SWButton>
        </div>
    {/snippet}
</SWModal>

<style>
    li {
        @apply py-2;
    }
</style>
