<!--
  -   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";

    export let teams: Team[] = [];
    export let blueTeam: string;
    export let redTeam: string;
    export let start = "";
    export let gamemode = "";
    export let map = "";
    export let kampfleiter: string | undefined = "";
    export let group: string | null = "";
    export let groupSearch = "";

    $: selectPlayers = $players.map(player => {
        return {
            name: player.name,
            value: player.id.toString()
        };
    }).sort((a, b) => a.name.localeCompare(b.name));

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

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

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

    $: selectableGroups = [{
        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} let:props>
        <input type="datetime-local" {...props} bind:value={start}/>
    </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-kampf">Kampfleiter</Label>
    <TypeAheadSearch items={selectPlayers} bind:selected={kampfleiter}></TypeAheadSearch>
</div>
<div class="m-2">
    <Label for="fight-kampf">Group</Label>
    <TypeAheadSearch items={selectableGroups} bind:selected={group} bind:searchValue={groupSearch}
                     all></TypeAheadSearch>
</div>
