<script lang="ts">
  import { onMount } from "svelte";
  import { GetTournaments } from "../../wailsjs/go/main/App";
  import { model } from "../../wailsjs/go/models";
  import {
    Button,
    Table,
    TableHead,
    TableHeadCell,
    TableBody,
    TableBodyRow,
    TableBodyCell,
    Modal,
  } from "flowbite-svelte";
  import TourCreator from "./TourCreator.svelte";
  import { Link } from "svelte-routing";

  let thingsList: model.Tournament[] = $state([]);
  let newThing: boolean = $state(false);

  function update() {
    GetTournaments().then((ts) => {
      thingsList = ts;
    });
  }

  onMount(update);
</script>

<Table>
  <TableHead>
    <TableHeadCell>Title</TableHeadCell>
    <TableHeadCell>Game</TableHeadCell>
    <TableHeadCell>Winner</TableHeadCell>
    <TableHeadCell></TableHeadCell>
  </TableHead>
  <TableBody>
    {#each thingsList as t}
      <TableBodyRow>
        <TableBodyCell>
          {t.Title}
        </TableBodyCell>
        <TableBodyCell>
          {t.Game.Name}
        </TableBodyCell>
        <TableBodyCell>
          {t.WinnierParticipant.Name}
        </TableBodyCell>

        <TableBodyCell>
          <Link class="text-primary-500 underline" to={`/tournament/${t.ID}`}
            >Edit</Link
          >
        </TableBodyCell>
      </TableBodyRow>
    {/each}
  </TableBody>
  <div class="flex-row justify-evenly p-5">
    <Button>View</Button>
    <Button on:click={(_) => (newThing = true)}>New Tournament</Button>
  </div>
  <Modal bind:open={newThing}>
    <TourCreator
      onCreated={() => {
        update();
        newThing = false;
      }}
    />
  </Modal>
</Table>
