<script lang="ts">
    import type { EventFight } from "@type/event";
    import { Button } from "@components/ui/button";
    import { EditIcon, MenuIcon } from "lucide-svelte";
    import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@components/ui/dialog";
    import FightEdit from "@components/moderator/components/FightEdit.svelte";
    import type { Team } from "@components/types/team";

    const { fight, teams }: { fight: EventFight; teams: Team[] } = $props();

    function handleSave(fightData) {
        // Handle the save action here
        console.log("Fight data saved:", fightData);
    }
</script>

<div>
    <Dialog>
        <DialogTrigger>
            <Button variant="ghost" size="icon">
                <EditIcon />
            </Button>
        </DialogTrigger>
        <DialogContent>
            <DialogHeader>
                <DialogTitle>Fight bearbeiten</DialogTitle>
                <DialogDescription>Hier kannst du die Daten des Kampfes bearbeiten.</DialogDescription>
            </DialogHeader>
            <FightEdit {fight} {teams} onSave={handleSave}>
                {#snippet actions(dirty, submit)}
                    <DialogFooter>
                        <Button disabled={!dirty} onclick={submit}>Speichern</Button>
                    </DialogFooter>
                {/snippet}
            </FightEdit>
        </DialogContent>
    </Dialog>
    <Button variant="ghost" size="icon">
        <MenuIcon />
    </Button>
</div>
