"use client";
import { jsx as r, jsxs as l, Fragment as A } from "react/jsx-runtime";
import * as t from "react";
import { useEffect as B } from "react";
import { Badge as E } from "./badge.js";
import { Command as F, CommandList as V, CommandEmpty as G, CommandGroup as X, CommandItem as $ } from "./command.js";
import { Label as q } from "./label.js";
import { cn as u } from "../../lib/utils.js";
import { selectTriggerVariants as H } from "./async-select.js";
import { Checkbox as I } from "./checkbox.js";
import { Icon as x } from "./icon.js";
import { inputVariants as J } from "./input.js";
import { Popover as K, PopoverTrigger as Q, PopoverContent as U } from "./popover.js";
import Y from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
const Z = t.createContext({ size: "default" });
function ue({
  options: a,
  value: n,
  onChange: s,
  onClear: m,
  placeholder: C = "Seleziona...",
  disabled: y = !1,
  size: f = "default",
  label: b,
  labelClassName: k,
  emptyMessage: M = "Nessun risultato trovato",
  className: z,
  searchPlaceholder: P = "Cerca...",
  searchable: R = !0,
  cancelLabel: j = "Cancella selezione",
  maxSelectedItems: i
}) {
  const p = t.useId(), [o, D] = t.useState(!1), [c, v] = t.useState(""), [O, S] = t.useState(
    void 0
  ), L = t.useRef(null), h = t.useRef(null), w = t.useCallback(
    (e) => {
      if (n.includes(e))
        s(n.filter((d) => d !== e));
      else {
        if (i && n.length >= i)
          return;
        s([...n, e]);
      }
    },
    [n, s, i]
  ), T = t.useCallback(() => {
    s([]), v(""), m && m();
  }, [s, m]), g = t.useMemo(() => a.filter((e) => n.includes(e.value)), [a, n]), W = t.useMemo(() => c ? a.filter(
    (e) => e.label.toLowerCase().includes(c.toLowerCase())
  ) : a, [a, c]), N = t.useMemo(() => i ? n.length >= i : !1, [n, i]);
  return B(() => {
    if (o && h.current) {
      const e = h.current.getBoundingClientRect();
      S(e.width);
    }
  }, [o]), /* @__PURE__ */ r(Z.Provider, { value: { size: f, id: p }, children: /* @__PURE__ */ l("div", { className: "space-y-1.5", children: [
    b && /* @__PURE__ */ r(q, { htmlFor: p, className: u(k, "w-fit"), children: b }),
    /* @__PURE__ */ r(
      "div",
      {
        ref: L,
        className: "relative w-full",
        "data-slot": "app-multiple-select-dropdown",
        children: /* @__PURE__ */ l(K, { open: o, onOpenChange: D, children: [
          /* @__PURE__ */ r(Q, { asChild: !0, children: /* @__PURE__ */ l(
            "button",
            {
              id: p,
              type: "button",
              role: "combobox",
              "aria-expanded": o,
              disabled: y,
              ref: h,
              className: u(
                H({ size: f }),
                "!bg-d-input hover:bg-d-input/50 relative w-full justify-between font-normal",
                "ring-offset-background border-d-border/50 flex items-center rounded-md border whitespace-nowrap focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
                "aria-invalid:ring-d-destructive/20 aria-invalid:border-d-destructive",
                "focus-visible:ring-d-ring focus-visible:ring-1",
                o && "ring-d-ring ring-1",
                z
              ),
              children: [
                /* @__PURE__ */ r("div", { className: "flex w-full items-center justify-between gap-2 overflow-hidden", children: g.length > 0 ? /* @__PURE__ */ l(A, { children: [
                  /* @__PURE__ */ l(
                    E,
                    {
                      variant: "secondary",
                      className: "!bg-d-accent flex items-center gap-1",
                      children: [
                        /* @__PURE__ */ r("span", { children: g.length }),
                        g.length === 1 ? " elemento selezionato" : " elementi selezionati"
                      ]
                    }
                  ),
                  /* @__PURE__ */ r(
                    "div",
                    {
                      className: "border-d-input bg-d-accent cursor-pointer rounded-full p-1",
                      onClick: (e) => {
                        e.stopPropagation(), e.preventDefault(), T();
                      },
                      onMouseDown: (e) => e.preventDefault(),
                      "aria-label": j,
                      children: /* @__PURE__ */ r(
                        x,
                        {
                          name: "X",
                          size: "xs",
                          className: "!text-d-foreground opacity-50"
                        }
                      )
                    }
                  )
                ] }) : /* @__PURE__ */ r("span", { className: "text-d-muted-foreground", children: C }) }),
                /* @__PURE__ */ r(Y, { className: "ml-1 h-4 w-4 shrink-0 opacity-50" })
              ]
            }
          ) }),
          /* @__PURE__ */ r(
            U,
            {
              className: u("p-0"),
              style: { width: O },
              align: "start",
              side: "bottom",
              sideOffset: 4,
              onWheel: (e) => e.stopPropagation(),
              avoidCollisions: !1,
              children: /* @__PURE__ */ l(F, { className: "bg-d-popover w-full rounded-md border border-none", children: [
                R && /* @__PURE__ */ r("div", { className: "border-d-border flex items-center justify-between border-b px-3", children: /* @__PURE__ */ l("div", { className: "flex items-center", children: [
                  /* @__PURE__ */ r(
                    x,
                    {
                      name: "Search",
                      className: "text-d-accent-foreground opacity-50",
                      size: "sm"
                    }
                  ),
                  /* @__PURE__ */ r(
                    "input",
                    {
                      id: "app-multiple-select-dropdown-filter",
                      placeholder: P,
                      value: c,
                      onChange: (e) => v(e.target.value),
                      className: `focus-visible:ring-none border-none focus-visible:border-none disabled:opacity-50 ${J({ size: f })} !shadow-none`
                    }
                  )
                ] }) }),
                /* @__PURE__ */ l(V, { className: "max-h-60 w-full", children: [
                  /* @__PURE__ */ r(G, { children: M }),
                  /* @__PURE__ */ r(X, { children: W.map((e) => {
                    const d = n.includes(e.value);
                    return /* @__PURE__ */ l(
                      $,
                      {
                        value: e.value,
                        disabled: e.disabled || !d && N,
                        onSelect: () => w(e.value),
                        className: u(
                          "aria-selected:!bg-d-accent aria-selected:text-d-accent-foreground flex cursor-pointer items-center gap-2 px-2 py-1.5",
                          (e.disabled || !d && N) && "cursor-not-allowed opacity-50"
                        ),
                        children: [
                          /* @__PURE__ */ r(
                            I,
                            {
                              checked: d,
                              className: "z-10 mr-2 flex-shrink-0",
                              onCheckedChange: () => {
                                w(e.value);
                              }
                            }
                          ),
                          /* @__PURE__ */ r("span", { className: "flex-1 truncate", children: e.label })
                        ]
                      },
                      e.value
                    );
                  }) })
                ] })
              ] })
            }
          )
        ] })
      }
    )
  ] }) });
}
export {
  ue as AppMultipleSelectDropdown
};
