<script lang="ts">
    import type { GroupUpdateEdit, ResponseGroups, SWEvent } from "@type/event";
    import { Popover, PopoverContent, PopoverTrigger } from "@components/ui/popover";
    import { CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, Command } from "@components/ui/command";
    import { ChevronsUpDownIcon, PlusIcon, CheckIcon, MinusIcon } from "lucide-svelte";
    import { Button } from "@components/ui/button";
    import { cn } from "@components/utils";
    import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@components/ui/dialog";
    import GroupEdit from "./GroupEdit.svelte";
    import { eventRepo } from "@components/repo/event";

    let {
        event,
        groups = $bindable(),
        value = $bindable(),
    }: {
        event: SWEvent;
        groups: ResponseGroups[];
        value: number | null;
    } = $props();

    let selectedGroup = $derived(groups.find((group) => group.id === value));

    let createOpen = $state(false);
    let groupSelectOpen = $state(false);

    async function handleGroupSave(group: GroupUpdateEdit) {
        let g = await $eventRepo.createGroup(event.id, group);
        groups.push(g);
        value = g.id;
        createOpen = false;
        groupSelectOpen = false;
    }
</script>

<Dialog bind:open={createOpen}>
    <Popover bind:open={groupSelectOpen}>
        <PopoverTrigger>
            {#snippet child({ props })}
                <Button id="fight-group" variant="outline" class="justify-between" {...props} role="combobox">
                    {selectedGroup?.name || "Keine Gruppe"}
                    <ChevronsUpDownIcon class="ml-2 size-4 shrink-0 opacity-50" />
                </Button>
            {/snippet}
        </PopoverTrigger>
        <PopoverContent class="p-0">
            <Command>
                <CommandInput placeholder="Gruppe suchen..." />
                <CommandList>
                    <CommandGroup>
                        <CommandItem value={"new"} onSelect={() => (createOpen = true)}>
                            <PlusIcon class={"mr-2 size-4"} />
                            Neue Gruppe
                        </CommandItem>

                        <CommandGroup heading="Gruppen">
                            <CommandItem
                                value={"none"}
                                onSelect={() => {
                                    value = null;
                                    groupSelectOpen = false;
                                }}
                            >
                                {#if value === null}
                                    <CheckIcon class={"mr-2 size-4"} />
                                {:else}
                                    <MinusIcon class={"mr-2 size-4"} />
                                {/if}
                                Keine Gruppe
                            </CommandItem>

                            {#each groups as group}
                                <CommandItem
                                    value={group.id.toString()}
                                    onSelect={() => {
                                        value = group.id;
                                        groupSelectOpen = false;
                                    }}
                                >
                                    <CheckIcon class={cn("mr-2 size-4", value !== group.id && "text-transparent")} />
                                    {group.name}
                                </CommandItem>
                            {/each}
                        </CommandGroup>
                    </CommandGroup>
                </CommandList>
            </Command>
        </PopoverContent>
    </Popover>
    <DialogContent>
        <DialogHeader>
            <DialogTitle>Neue Gruppe erstellen</DialogTitle>
            <DialogDescription>Hier kannst du eine neue Gruppe erstellen</DialogDescription>
        </DialogHeader>
        <GroupEdit group={null} onSave={handleGroupSave}>
            {#snippet actions(dirty, submit)}
                <DialogFooter>
                    <Button disabled={!dirty} onclick={submit}>Speichern</Button>
                </DialogFooter>
            {/snippet}
        </GroupEdit>
    </DialogContent>
</Dialog>
