<script lang="ts">
    import type { Snippet } from "svelte";
    import type { ResponseGroups, GroupUpdateEdit } from "@type/event";
    import { Label } from "@components/ui/label";
    import { Input } from "@components/ui/input";
    import { Select, SelectContent, SelectItem, SelectTrigger } from "@components/ui/select";

    const {
        group,
        actions,
        onSave,
    }: {
        group: ResponseGroups | null;
        actions: Snippet<[boolean, () => void]>;
        onSave: (groupData: GroupUpdateEdit) => void;
    } = $props();

    let groupName = $state(group?.name ?? "");
    let groupType = $state(group?.type ?? "GROUP_STAGE");
    let pointsPerWin = $state(group?.pointsPerWin ?? 3);
    let pointsPerLoss = $state(group?.pointsPerLoss ?? 0);
    let pointsPerDraw = $state(group?.pointsPerDraw ?? 1);

    let canSave = $derived(groupName.length > 0 && (groupType === "GROUP_STAGE" || groupType === "ELIMINATION_STAGE") && pointsPerWin !== null && pointsPerLoss !== null && pointsPerDraw !== null);

    let dirty = $derived(
        groupName !== (group ? group.name : "") ||
            groupType !== (group ? group.type : "GROUP_STAGE") ||
            pointsPerWin !== (group ? group.pointsPerWin : 3) ||
            pointsPerLoss !== (group ? group.pointsPerLoss : 0) ||
            pointsPerDraw !== (group ? group.pointsPerDraw : 1)
    );

    function submit() {
        onSave({
            name: groupName,
            type: groupType,
            pointsPerWin: pointsPerWin,
            pointsPerLoss: pointsPerLoss,
            pointsPerDraw: pointsPerDraw,
        });
    }
</script>

<div class="flex flex-col gap-2">
    <Label for="group-name">Name</Label>
    <Input id="group-name" bind:value={groupName} placeholder="z.B. Gruppenphase A" />

    <Label for="group-type">Typ</Label>
    <Select
        value={groupType}
        type="single"
        onValueChange={(v) => {
            if (v) groupType = v as "GROUP_STAGE" | "ELIMINATION_STAGE";
        }}
    >
        <SelectTrigger id="group-type" placeholder="Wähle einen Gruppentyp">
            {groupType === "GROUP_STAGE" ? "Gruppenphase" : "Eliminierungsphase"}
        </SelectTrigger>
        <SelectContent>
            <SelectItem value="GROUP_STAGE">Gruppenphase</SelectItem>
            <SelectItem value="ELIMINATION_STAGE">Eliminierungsphase</SelectItem>
        </SelectContent>
    </Select>

    {#if groupType === "GROUP_STAGE" && group !== null}
        <Label for="points-win">Punkte pro Sieg</Label>
        <Input id="points-win" type="number" bind:value={pointsPerWin} placeholder="3" />

        <Label for="points-loss">Punkte pro Niederlage</Label>
        <Input id="points-loss" type="number" bind:value={pointsPerLoss} placeholder="0" />

        <Label for="points-draw">Punkte pro Unentschieden</Label>
        <Input id="points-draw" type="number" bind:value={pointsPerDraw} placeholder="1" />
    {/if}
</div>

{@render actions(group === null ? canSave : dirty, submit)}
