<script lang="ts">
    import {Input, Label, Select} from "flowbite-svelte";
    import TypeAheadSearch from "./TypeAheadSearch.svelte";
    import {gamemodes, groups, maps, players} from "../../stores/stores.js";
    import type {Team} from '../../types/team.js';

    export let teams: Team[] = [];
    export let blueTeam: string;
    export let redTeam: string;
    export let start = "";
    export let gamemode = "";
    export let map = "";
    export let kampfleiter = "";
    export let group = "";
    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>
