<!--
  -   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 TypeAheadSearch from "@components/admin/components/TypeAheadSearch.svelte";
    import {players} from "@stores/stores.ts";
    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>
            <TypeAheadSearch bind:searchValue bind:selected={selectedPlayer}
                             items={$players.map(v => ({ name: v.name, value: v.uuid }))}/>
        </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>
