<!--
  -   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 {Input, Label, Select} from "flowbite-svelte";
    import TypeAheadSearch from "./TypeAheadSearch.svelte";
    import {gamemodes, groups, maps, players} from "@stores/stores.ts";
    import type {Team} from "@type/team.ts";

  interface Props {
    teams?: Team[];
    blueTeam: string;
    redTeam: string;
    start?: string;
    gamemode?: string;
    map?: string;
    spectatePort?: string | null;
    group?: string | null;
    groupSearch?: string;
  }

  let {
    teams = [],
    blueTeam = $bindable(),
    redTeam = $bindable(),
    start = $bindable(""),
    gamemode = $bindable(""),
    map = $bindable(""),
    spectatePort = $bindable(null),
    group = $bindable(""),
    groupSearch = $bindable("")
  }: Props = $props();

    let selectableTeams = $derived(teams.map(team => {
        return {
            name: team.name,
            value: team.id.toString()
        };
    }).sort((a, b) => a.name.localeCompare(b.name)));

    let selectableGamemodes = $derived($gamemodes.map(gamemode => {
        return {
            name: gamemode,
            value: gamemode
        };
    }).sort((a, b) => a.name.localeCompare(b.name)));
    let customGamemode = $derived(!selectableGamemodes.some((e) => e.name === gamemode) && gamemode !== "");
    let selectableCustomGamemode = $derived([
        ...selectableGamemodes, {
            name: gamemode + " (custom)",
            value: gamemode
        }
    ]);

    let mapsStore = $derived(maps(gamemode));
    let selectableMaps = $derived($mapsStore.map(map => {
        return {
            name: map,
            value: map
        };
    }).sort((a, b) => a.name.localeCompare(b.name)));
    let customMap = $derived(!selectableMaps.some((e) => e.name === map) && map !== "");
    let selectableCustomMaps = $derived([
        ...selectableMaps, {
            name: map + " (custom)",
            value: map
        }
    ]);

    let selectableGroups = $derived([{
        name: "None",
        value: ""
    }, {
        value: groupSearch,
        name: `Create: '${groupSearch}'`
    }, ...$groups.map(group => {
        return {
            name: group,
            value: group
        };
    }).sort((a, b) => a.name.localeCompare(b.name))]);
</script>

<div class="m-2">
    <Label for="fight-blue">Blue Team</Label>
    <Select items={selectableTeams} bind:value={blueTeam} id="fight-blue"></Select>
</div>
<div class="m-2">
    <Label for="fight-red">Red Team</Label>
    <Select items={selectableTeams} bind:value={redTeam} id="fight-red"></Select>
</div>
<div class="mt-4">
    <Label for="fight-start">Start</Label>
    <Input id="fight-start" bind:value={start} >
        {#snippet children({ props })}
        <input type="datetime-local" {...props} bind:value={start}/>
            {/snippet}
    </Input>
</div>
<div class="m-2">
    <Label for="fight-gamemode">Gamemode</Label>
    <Select items={customGamemode ? selectableCustomGamemode : selectableGamemodes} bind:value={gamemode}
            id="fight-gamemode"></Select>
</div>
<div class="m-2">
    <Label for="fight-maps">Map</Label>
    <Select items={customMap ? selectableCustomMaps : selectableMaps} bind:value={map} id="fight-maps"
            disabled={customGamemode} class={customGamemode ? "cursor-not-allowed" : ""}></Select>
</div>
<div class="m-2">
    <Label for="fight-port">Spectate Port</Label>
    <Input id="fight-port" bind:value={spectatePort} >
        {#snippet children({ props })}
        <input type="number" inputmode="numeric" {...props} bind:value={spectatePort}/>
            {/snippet}
    </Input>
</div>
<div class="m-2">
    <Label for="fight-kampf">Group</Label>
    <TypeAheadSearch items={selectableGroups} bind:selected={group} bind:searchValue={groupSearch}
                     all></TypeAheadSearch>
</div>
