"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Check, ChevronsUpDown, X } from "lucide-react";
import { Button } from "./button";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem
} from "./command";
import {
  Popover,
  PopoverContent,
  PopoverTrigger
} from "./popover";
import { cn } from "../../lib/utils";
function Combobox({
  options,
  value,
  onChange,
  placeholder = "Seleccionar opci\xF3n...",
  searchPlaceholder = "Buscar...",
  emptyMessage = "No se encontraron opciones.",
  disabled = false,
  clearable = false,
  className
}) {
  const [open, setOpen] = React.useState(false);
  const selectedOption = options.find((option) => option.value === value);
  const handleSelect = (optionValue) => {
    if (disabled) return;
    const newValue = value === optionValue ? void 0 : optionValue;
    onChange(newValue);
    setOpen(false);
  };
  const handleClear = (e) => {
    e.stopPropagation();
    if (disabled) return;
    onChange(void 0);
  };
  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
      Button,
      {
        variant: "outline",
        role: "combobox",
        "aria-expanded": open,
        className: cn(
          "w-full justify-between",
          disabled && "opacity-50 cursor-not-allowed",
          className
        ),
        disabled,
        children: [
          /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder }),
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
            clearable && selectedOption && /* @__PURE__ */ jsx(
              "span",
              {
                role: "button",
                tabIndex: 0,
                onClick: handleClear,
                onKeyDown: (e) => {
                  if (e.key === "Enter" || e.key === " ") {
                    e.preventDefault();
                    const syntheticEvent = {
                      preventDefault: () => {
                      },
                      stopPropagation: () => {
                      }
                    };
                    handleClear(syntheticEvent);
                  }
                },
                className: "h-4 w-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer",
                children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
              }
            ),
            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })
          ] })
        ]
      }
    ) }),
    /* @__PURE__ */ jsx(
      PopoverContent,
      {
        className: "p-0",
        align: "start",
        style: { width: "var(--radix-popover-trigger-width)" },
        children: /* @__PURE__ */ jsxs(Command, { children: [
          /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder }),
          /* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }),
          /* @__PURE__ */ jsx(CommandGroup, { className: "max-h-64 overflow-auto", children: options.map((option) => /* @__PURE__ */ jsxs(
            CommandItem,
            {
              value: option.label,
              disabled: option.disabled,
              onSelect: () => handleSelect(option.value),
              children: [
                /* @__PURE__ */ jsx(
                  Check,
                  {
                    className: cn(
                      "mr-2 h-4 w-4",
                      value === option.value ? "opacity-100" : "opacity-0"
                    )
                  }
                ),
                /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
                  /* @__PURE__ */ jsx("span", { children: option.label }),
                  option.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: option.description })
                ] })
              ]
            },
            option.value
          )) })
        ] })
      }
    )
  ] });
}
export {
  Combobox
};
