"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.StateField = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const country_utils_1 = require("../../../utils/country-utils");
const react_hook_form_1 = require("react-hook-form");
const form_1 = require("../../../components/ui/form");
const button_1 = require("../../../components/ui/button");
const utils_1 = require("../../../lib/utils");
const popover_1 = require("../../../components/ui/popover");
const lucide_react_1 = require("lucide-react");
const command_1 = require("../../../components/ui/command");
function StateComboBox({ value, placeholder, onChange, countryName, emptyMessage, readOnly }) {
    const [open, setOpen] = react_1.default.useState(false);
    const form = (0, react_hook_form_1.useFormContext)();
    const country = form.watch(countryName);
    const options = react_1.default.useMemo(() => {
        const states = (0, country_utils_1.getStateCountry)(country)?.map((state) => ({
            value: state.code,
            label: state.name
        }));
        if (!states) {
            onChange?.('');
        }
        return states ?? [];
    }, [country, onChange]);
    const getDisplayValue = react_1.default.useCallback((value) => {
        return options.find((option) => option.value === value)?.label ?? null;
    }, [options]);
    return ((0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: readOnly ? false : open, onOpenChange: readOnly ? () => { } : setOpen, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)(button_1.Button, { variant: "outline", role: "combobox", "aria-expanded": readOnly ? false : open, readOnly: readOnly, tabIndex: 0, className: (0, utils_1.cn)('border-input-border bg-input hover:bg-input text-foreground h-10 w-full justify-between rounded-md border px-4 py-2 pl-6 text-left text-base font-normal focus:ring-2 focus:ring-offset-0 focus:outline-none', !value && 'text-muted-foreground'), children: [getDisplayValue(value) ?? placeholder, !readOnly && ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" }))] }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "w-(--radix-popover-trigger-width) p-0", children: (0, jsx_runtime_1.jsxs)(command_1.Command, { children: [(0, jsx_runtime_1.jsx)(command_1.CommandInput, { placeholder: placeholder }), (0, jsx_runtime_1.jsxs)(command_1.CommandList, { children: [(0, jsx_runtime_1.jsx)(command_1.CommandEmpty, { children: emptyMessage }), (0, jsx_runtime_1.jsx)(command_1.CommandGroup, { children: options.map((option) => ((0, jsx_runtime_1.jsx)(command_1.CommandItem, { value: option.value, keywords: [option.label], onSelect: (currentValue) => {
                                            onChange?.(value !== currentValue ? currentValue : '');
                                            setOpen(false);
                                        }, children: option.label }, option.value))) })] })] }) })] }));
}
const StateField = ({ countryName = 'address.country', label, placeholder, emptyMessage, required, readOnly, ...others }) => {
    return ((0, jsx_runtime_1.jsx)(form_1.FormField, { ...others, name: others.name, render: ({ field }) => ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [label && (0, jsx_runtime_1.jsx)(form_1.FormLabel, { children: label }), (0, jsx_runtime_1.jsx)(StateComboBox, { countryName: countryName, placeholder: placeholder, emptyMessage: emptyMessage, readOnly: readOnly, ...field }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {})] })) }));
};
exports.StateField = StateField;
