"use client"

import * as React from "react"
import { Check, ChevronsUpDown } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
    Command,
    CommandEmpty,
    CommandGroup,
    CommandInput,
    CommandItem,
    CommandList,
} from "@/components/ui/command"
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from "@/components/ui/popover";

export function MultipleSelector({
    value,
    onChange,
    options,
}: {
    value: string[]; // Current selected values (managed by parent)
    onChange: (selected: string[]) => void; // Callback to update parent state
    options: { value: string; label: string }[]; // Framework options (managed by parent)
}) {
    const [open, setOpen] = React.useState(false);

    const handleSetValue = (val: string) => {
        let updatedValue: string[];
        if (value.includes(val)) {
            updatedValue = value.filter((item) => item !== val);
        } else {
            updatedValue = [...value, val];
        }
        onChange(updatedValue); // Notify the parent component about the change
    };

    return (
        <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
                <Button
                    variant="outline"
                    role="combobox"
                    aria-expanded={open}
                    className="w-[190px] h-12 text-white bg-transparent justify-between hover:text-white"
                >
                    <div className="flex gap-2 justify-start">
                        {value?.length ? (
                            value.map((val, i) => (
                                <div
                                    key={i}
                                    className="px-2 py-1 rounded-xl text-gray bg-white text-xs font-medium"
                                >
                                    {options.find((option) => option.value === val)?.label}
                                </div>
                            ))
                        ) : (
                            "Select options..."
                        )}
                    </div>
                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                </Button>
            </PopoverTrigger>
            <PopoverContent className="w-[200px] p-0">
                <Command>
                    <CommandInput placeholder="Search option..." />
                    <CommandEmpty>No option found.</CommandEmpty>
                    <CommandGroup>
                        <CommandList>
                            {options.map((option) => (
                                <CommandItem
                                    key={option.value}
                                    value={option.value}
                                    onSelect={() => handleSetValue(option.value)}
                                >
                                    <Check
                                        className={cn(
                                            "mr-2 h-4 w-4",
                                            value.includes(option.value) ? "opacity-100" : "opacity-0"
                                        )}
                                    />
                                    {option.label}
                                </CommandItem>
                            ))}
                        </CommandList>
                    </CommandGroup>
                </Command>
            </PopoverContent>
        </Popover>
    );
}