<!--
  -   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 {Button, Modal} from "flowbite-svelte";
    import type {ExtendedEvent} from "@type/event.ts";
    import FightEditPart from "../../../components/FightEditPart.svelte";
    import ErrorModal from "../../../components/ErrorModal.svelte";
    import {createEventDispatcher} from "svelte";
    import dayjs from "dayjs";
    import {fightRepo} from "@repo/fight.ts";

    let dispatch = createEventDispatcher();

  interface Props {
    open?: boolean;
    data: ExtendedEvent;
  }

  let { open = $bindable(false), data }: Props = $props();

    let blueTeam: string = $state("");
    let redTeam: string = $state("");

    let start: string = $state("");

    let gamemode: string = $state("");
    let map: string = $state("");

    let spectatePort: string | null = $state(null);
    let group: string | null = $state(null);
    let groupSearch = $state("");

    let errorOpen = $state(false);
    let error: any = $state(undefined);

    let canCreate = $derived(blueTeam !== "" && redTeam !== "" && start !== "" && gamemode !== "" && map !== "");

    async function create() {
        try {
            open = false;
            let res = await $fightRepo.createFight(data.event.id, {
                spielmodus: gamemode,
                blueTeam: parseInt(blueTeam),
                redTeam: parseInt(redTeam),
                start: dayjs(start),
                map,
                spectatePort: spectatePort ? parseInt(spectatePort) : null,
                group,
            });
            reset();

            dispatch("create");
        } catch (e) {
            error = e;
            errorOpen = true;
            reset();
        }
    }

    function reset() {
        blueTeam = "";
        redTeam = "";
        start = "";
        gamemode = "";
        map = "";
        spectatePort = "";
        group = null;
        groupSearch = "";
    }
</script>

<Modal bind:open outsideclose title="Create Fight" on:hide={reset}>
    <div class="text-center">
        <FightEditPart
                bind:blueTeam
                bind:redTeam
                bind:start
                bind:spectatePort
                bind:gamemode
                bind:map
                bind:group
                bind:groupSearch
                teams={data.teams}
        />
    </div>
    {#snippet footer()}
  
          <Button onclick={create} class="mr-auto" disabled={!canCreate}>Create</Button>
          <Button color="light" onclick={() => open = false}>Cancel</Button>
      
  {/snippet}
</Modal>

<ErrorModal bind:open={errorOpen} bind:error={error} on:close={() => errorOpen = false}/>
