"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { X } from "lucide-react";
import { Badge } from "./badge";
import { Button } from "./button";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem
} from "./command";
import {
  Popover,
  PopoverContent,
  PopoverTrigger
} from "./popover";
import { cn } from "../../lib/utils";
function MultiSelect({
  options,
  value = [],
  onChange,
  placeholder = "Seleccionar opciones...",
  maxSelected,
  disabled = false,
  className
}) {
  const [open, setOpen] = React.useState(false);
  const handleSelect = (optionValue) => {
    if (disabled) return;
    const newValue = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : maxSelected && value.length >= maxSelected ? value : [...value, optionValue];
    onChange(newValue);
  };
  const handleRemove = (optionValue) => {
    if (disabled) return;
    onChange(value.filter((v) => v !== optionValue));
  };
  const selectedOptions = options.filter((option) => value.includes(option.value));
  const availableOptions = options.filter((option) => !value.includes(option.value));
  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
      Button,
      {
        variant: "outline",
        role: "combobox",
        "aria-expanded": open,
        className: cn(
          "w-full justify-between min-h-10 h-auto",
          disabled && "opacity-50 cursor-not-allowed"
        ),
        disabled,
        children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 flex-1", children: selectedOptions.length > 0 ? selectedOptions.map((option) => /* @__PURE__ */ jsxs(
          Badge,
          {
            variant: "secondary",
            className: "text-xs",
            children: [
              option.label,
              /* @__PURE__ */ jsx(
                "span",
                {
                  role: "button",
                  tabIndex: 0,
                  className: "ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer",
                  onKeyDown: (e) => {
                    if (e.key === "Enter") {
                      handleRemove(option.value);
                    }
                  },
                  onMouseDown: (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                  },
                  onClick: (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    handleRemove(option.value);
                  },
                  children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3 text-muted-foreground hover:text-foreground" })
                }
              )
            ]
          },
          option.value
        )) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) })
      }
    ) }),
    /* @__PURE__ */ jsx(PopoverContent, { className: "p-0", align: "start", style: { width: "var(--radix-popover-trigger-width)" }, children: /* @__PURE__ */ jsxs(Command, { children: [
      /* @__PURE__ */ jsx(CommandInput, { placeholder: "Buscar opciones..." }),
      /* @__PURE__ */ jsx(CommandEmpty, { children: "No se encontraron opciones." }),
      /* @__PURE__ */ jsx(CommandGroup, { className: "max-h-64 overflow-auto", children: availableOptions.map((option) => /* @__PURE__ */ jsx(
        CommandItem,
        {
          value: option.label,
          disabled: option.disabled || !!(maxSelected && value.length >= maxSelected),
          onSelect: () => handleSelect(option.value),
          children: /* @__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 {
  MultiSelect
};
