<script lang="ts">
  import { Button, Input, Label, Select } from "flowbite-svelte";
  import { model } from "../../wailsjs/go/models";
  import { GetGames, SaveTournament } from "../../wailsjs/go/main/App";
  import { onMount } from "svelte";

  let tournament = $state(new model.Tournament());
  let games: model.Game[] = $state([]);
  interface Props {
    onCreated?: (t: model.Tournament) => void;
  }

  let { onCreated = (_) => {} }: Props = $props();

  function submit(e: Event) {
    e.preventDefault();
    SaveTournament(tournament).then(() => {
      onCreated(tournament);
    });
  }
  onMount(() => {
    GetGames().then((gs) => {
      games = gs;
    });
  });
</script>

<form onsubmit={submit}>
  <div>
    <Label>Title</Label>
    <Input type="text" bind:value={tournament.Title} />
  </div>
  <div>
    e
    <Label>Game</Label>
    <Select
      items={games.map((g) => {
        return { value: g.ID, name: g.Name };
      })}
      bind:value={tournament.GameID}
    />
  </div>
  <div>
    <Label>Size</Label>
    <Input type="number" step="1" min="1" bind:value={tournament.Size} />
  </div>
  <Button type="submit">Save</Button>
</form>
