"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { cn } from "../../lib/utils/index.js";
import { Button } from "../ui/button.js";
import {
  Popover,
  PopoverContent,
  PopoverTrigger
} from "../ui/popover.js";
import { ChevronDown, Check, X } from "lucide-react";
import { useState } from "react";
function MultiSelectFilter({
  label,
  options,
  values,
  onChange,
  className,
  "data-cy": dataCy = "multi-select-filter"
}) {
  const [open, setOpen] = useState(false);
  const selectedOptions = options.filter((opt) => values.includes(opt.value));
  const hasSelection = selectedOptions.length > 0;
  const handleToggle = (optionValue) => {
    if (values.includes(optionValue)) {
      onChange(values.filter((v) => v !== optionValue));
    } else {
      onChange([...values, optionValue]);
    }
  };
  const handleRemove = (optionValue, e) => {
    e.stopPropagation();
    onChange(values.filter((v) => v !== optionValue));
  };
  const handleClearAll = (e) => {
    e.stopPropagation();
    onChange([]);
  };
  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", "data-cy": dataCy, children: [
    /* @__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(
            "h-10 gap-2 justify-between min-w-[120px]",
            hasSelection && "text-foreground",
            className
          ),
          "data-cy": `${dataCy}-trigger`,
          children: [
            /* @__PURE__ */ jsx("span", { className: "truncate", children: hasSelection ? `${label} (${selectedOptions.length})` : label }),
            /* @__PURE__ */ jsx(
              ChevronDown,
              {
                className: cn(
                  "h-4 w-4 text-muted-foreground shrink-0 transition-transform",
                  open && "rotate-180"
                )
              }
            )
          ]
        }
      ) }),
      /* @__PURE__ */ jsx(
        PopoverContent,
        {
          className: "w-48 p-1",
          align: "start",
          "data-cy": `${dataCy}-content`,
          children: /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: options.map((option) => {
            const isSelected = values.includes(option.value);
            return /* @__PURE__ */ jsxs(
              "button",
              {
                onClick: () => handleToggle(option.value),
                className: cn(
                  "w-full text-left px-3 py-2 text-sm rounded-md",
                  "flex items-center justify-between gap-2",
                  "hover:bg-muted transition-colors",
                  isSelected && "bg-muted font-medium"
                ),
                "data-cy": `${dataCy}-option-${option.value}`,
                children: [
                  /* @__PURE__ */ jsx("span", { children: option.label }),
                  isSelected && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-primary" })
                ]
              },
              option.value
            );
          }) })
        }
      )
    ] }),
    hasSelection && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-wrap", children: [
      selectedOptions.map((option) => /* @__PURE__ */ jsxs(
        "span",
        {
          className: cn(
            "inline-flex items-center gap-1 px-2 py-1",
            "text-xs font-medium rounded-md",
            "bg-primary/10 text-primary"
          ),
          "data-cy": `${dataCy}-badge-${option.value}`,
          children: [
            option.label,
            /* @__PURE__ */ jsx(
              "button",
              {
                onClick: (e) => handleRemove(option.value, e),
                className: "hover:bg-primary/20 rounded-sm p-0.5 transition-colors",
                "aria-label": `Remove ${option.label}`,
                "data-cy": `${dataCy}-remove-${option.value}`,
                children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
              }
            )
          ]
        },
        option.value
      )),
      selectedOptions.length > 1 && /* @__PURE__ */ jsx(
        "button",
        {
          onClick: handleClearAll,
          className: cn(
            "text-xs text-muted-foreground hover:text-foreground",
            "px-1.5 py-1 transition-colors"
          ),
          "aria-label": "Clear all filters",
          "data-cy": `${dataCy}-clear-all`,
          children: "Clear"
        }
      )
    ] })
  ] });
}
export {
  MultiSelectFilter
};
