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

import { cn } from "../../lib/utils";
import { Popover, PopoverContent, PopoverTrigger } from "./popover";
import {
    Command,
    CommandEmpty,
    CommandGroup,
    CommandInput,
    CommandItem,
    CommandList,
} from "./command";

export type ComboboxOption = {
    value: string;
    label: string;
};

/**
 * Dropdown dengan pencarian (search-as-you-type), dipakai untuk field yang
 * opsinya banyak/dinamis (mis. daftar Sales atau Customer) supaya user tidak
 * perlu scroll panjang seperti <select> biasa dan tidak salah ketik seperti
 * input teks bebas.
 */
export function Combobox({
    options,
    value,
    onChange,
    placeholder = "Pilih...",
    searchPlaceholder = "Cari...",
    emptyText = "Tidak ditemukan.",
    className,
    disabled,
}: {
    options: ComboboxOption[];
    value?: string;
    onChange: (value: string) => void;
    placeholder?: string;
    searchPlaceholder?: string;
    emptyText?: string;
    className?: string;
    disabled?: boolean;
}) {
    const [open, setOpen] = React.useState(false);
    const selected = options.find((o) => String(o.value) === String(value));

    return (
        <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
                <button
                    type="button"
                    disabled={disabled}
                    className={cn(
                        "flex h-10 w-full items-center justify-between rounded-xl border border-slate-200 bg-white px-3 text-left text-sm outline-none transition focus:border-[#18b89a] focus:ring-2 focus:ring-[#18b89a]/10 disabled:opacity-50",
                        className,
                    )}
                >
                    <span
                        className={cn(
                            "truncate",
                            !selected && "text-slate-400",
                        )}
                    >
                        {selected ? selected.label : placeholder}
                    </span>
                    <ChevronsUpDown
                        size={14}
                        className="ml-2 shrink-0 text-slate-400"
                    />
                </button>
            </PopoverTrigger>
            <PopoverContent
                className="w-[--radix-popover-trigger-width] p-0"
                onOpenAutoFocus={(e) => e.preventDefault()}
            >
                <Command>
                    <CommandInput placeholder={searchPlaceholder} />
                    <CommandList>
                        <CommandEmpty>{emptyText}</CommandEmpty>
                        <CommandGroup>
                            {options.map((option) => (
                                <CommandItem
                                    key={option.value}
                                    value={option.label}
                                    onSelect={() => {
                                        onChange(option.value);
                                        setOpen(false);
                                    }}
                                >
                                    <Check
                                        size={14}
                                        className={cn(
                                            "shrink-0",
                                            String(option.value) ===
                                                String(value)
                                                ? "opacity-100"
                                                : "opacity-0",
                                        )}
                                    />
                                    {option.label}
                                </CommandItem>
                            ))}
                        </CommandGroup>
                    </CommandList>
                </Command>
            </PopoverContent>
        </Popover>
    );
}