"use client"

import { Check, ChevronsUpDown } from "lucide-react"
import * as React from "react"

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"
import { useLanguage } from "@/lib/language-context"
import { cn } from "@/lib/utils"

interface ComboboxProps {
    options: { value: string; label: string }[]
    value: string
    onSelect: (value: string) => void
    placeholder?: string
    searchPlaceholder?: string
    emptyMessage?: string
    className?: string
}

export function Combobox({
    options,
    value,
    onSelect,
    placeholder,
    searchPlaceholder,
    emptyMessage,
    className,
}: ComboboxProps) {
    const { t } = useLanguage()
    const [open, setOpen] = React.useState(false)
    const resolvedPlaceholder = placeholder || t('common.selectOption')
    const resolvedSearchPlaceholder = searchPlaceholder || t('common.search')
    const resolvedEmptyMessage = emptyMessage || t('common.noOptionsFound')

    return (
        <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
                <Button
                    variant="outline"
                    role="combobox"
                    aria-expanded={open}
                    className={cn("w-full justify-between", className)}
                >
                    {value
                        ? options.find((option) => option.value === value)?.label
                        : resolvedPlaceholder}
                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                </Button>
            </PopoverTrigger>
            <PopoverContent className="w-[--radix-popover-trigger-width] p-0 bg-white" align="start">
                <Command>
                    <CommandInput placeholder={resolvedSearchPlaceholder} />
                    <CommandList>
                        <CommandEmpty>{resolvedEmptyMessage}</CommandEmpty>
                        <CommandGroup>
                            {options.map((option) => (
                                <CommandItem
                                    key={option.value}
                                    value={option.label}
                                    onSelect={() => {
                                        onSelect(option.value === value ? "" : option.value)
                                        setOpen(false)
                                    }}
                                >
                                    <Check
                                        className={cn(
                                            "mr-2 h-4 w-4",
                                            value === option.value ? "opacity-100" : "opacity-0"
                                        )}
                                    />
                                    {option.label}
                                </CommandItem>
                            ))}
                        </CommandGroup>
                    </CommandList>
                </Command>
            </PopoverContent>
        </Popover>
    )
}
