"use client";
import { jsxs, jsx } from 'react/jsx-runtime';
import { useId, useState } from 'react';
import { ChevronDownIcon, CheckIcon } from 'lucide-react';
import { cn } from '../lib/utils.mjs';
import { Button } from './button.mjs';
import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from './command.mjs';
import { Popover, PopoverTrigger, PopoverContent } from './popover.mjs';

function SearchSelect({
  options,
  value,
  onChange,
  placeholder = "Select option",
  emptyMessage = "No option found."
}) {
  const id = useId();
  const [open, setOpen] = useState(false);
  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: false, children: [
    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
      Button,
      {
        id,
        variant: "outline",
        role: "combobox",
        "aria-expanded": open,
        className: "bg-background hover:bg-background border-input w-full justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px]",
        children: [
          /* @__PURE__ */ jsx("span", { className: cn("truncate", !value && "text-muted-foreground"), children: value ? options.find((option) => option.value === value)?.label : placeholder }),
          /* @__PURE__ */ jsx(
            ChevronDownIcon,
            {
              size: 16,
              className: "text-muted-foreground/80 shrink-0",
              "aria-hidden": "true"
            }
          )
        ]
      }
    ) }),
    /* @__PURE__ */ jsx(
      PopoverContent,
      {
        className: "border-input w-full min-w-[var(--radix-popper-anchor-width)] p-0 z-[9999]",
        align: "start",
        usePortal: false,
        children: /* @__PURE__ */ jsxs(Command, { children: [
          /* @__PURE__ */ jsx(CommandInput, { placeholder: "Search options..." }),
          /* @__PURE__ */ jsxs(CommandList, { children: [
            /* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }),
            /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs(
              CommandItem,
              {
                value: option.value,
                onSelect: (currentValue) => {
                  onChange(currentValue === value ? "" : currentValue);
                  setOpen(false);
                },
                children: [
                  option.label,
                  value === option.value && /* @__PURE__ */ jsx(CheckIcon, { size: 16, className: "ml-auto" })
                ]
              },
              option.value
            )) })
          ] })
        ] })
      }
    )
  ] });
}

export { SearchSelect as default };
