<script lang="ts">
    import Button from '@/components/ui/button/button.svelte';
    import * as Card from '@/components/ui/card/index.js';
    import Input from '@/components/ui/input/input.svelte';
    import * as Table from '@/components/ui/table';
    import AppLayout from '@/layouts/AppLayout.svelte';
    import { type Tournament } from '@/types';

    const breadcrumbs = [
        { title: 'Home', href: '/' },
        { title: 'Tournaments', href: '/tournaments' },
        { title: 'Tournament Name', href: '/tournaments/1' },
    ];

    let { tournament }: { tournament: Tournament } = $props();

    let addTeam = $state(false);
    let teamName = $state('');

    async function handleAddTeam() {
        // add a new row to write the team name, on write complete save it
        tournament.teams.push({ name: teamName });

        // post request to /tournaments/{tournament}/addTeam
        const response = await fetch(`/api/tournaments/${tournament.id}/addTeam`, {
            method: 'POST',
            body: JSON.stringify({ teamName: teamName }),
            headers: {
                'Content-Type': 'application/json',
            },
        });
        if (response.ok) {
            const data = await response.json();
            console.log('data', data, JSON.stringify(data));
            tournament = data;
        } else {
            console.log('response not ok', JSON.stringify(response));
        }
    }
</script>

<AppLayout {breadcrumbs}>
    {JSON.stringify(tournament)}
    <!-- Teams -->
    <Card.Root>
        <Card.Header>
            <Card.Title>Teams</Card.Title>
        </Card.Header>
        <Card.Content>
            <Table.Root>
                <Table.Header>
                    <Table.Row>
                        <Table.Head>Name</Table.Head>
                        <Table.Head>Actions</Table.Head>
                    </Table.Row>
                </Table.Header>
                <Table.Body>
                    {#each tournament.teams as team (team)}
                        <Table.Row>
                            <Table.Cell>{JSON.stringify(team)}</Table.Cell>
                            <Table.Cell>
                                <Button variant="outline">Edit</Button>
                                <Button variant="destructive">Delete</Button>
                            </Table.Cell>
                        </Table.Row>
                    {/each}
                    {#if addTeam}
                        <Table.Row>
                            <Table.Cell><Input bind:value={teamName} placeholder="Team Name" /></Table.Cell>
                            <Table.Cell><Button onclick={handleAddTeam}>Save</Button></Table.Cell>
                        </Table.Row>
                    {/if}
                </Table.Body>
            </Table.Root>
        </Card.Content>
        <Card.Footer>
            <Button onclick={() => (addTeam = true)} variant="outline">+ Add Team</Button>
        </Card.Footer>
    </Card.Root>
</AppLayout>
