import { jsxs as c, jsx as a } from "react/jsx-runtime";
import { u as Y, a as Z, b as ee, c as te, F as se, s as ae, d as oe } from "../vendor.js";
import { useState as M, useMemo as d, useCallback as P, useEffect as ne, Fragment as B } from "react";
import { t as f } from "../global.module.js";
import { y as k, z as le, A as ie, c as re, s as ce, p as F, b as r, a as de } from "../tools/tools.js";
const pe = function(j) {
  const {
    as: $ = "div",
    className: g,
    contentClasses: b,
    disabled: p,
    dropOldClass: y,
    hideActiveOptions: A,
    onChange: u,
    options: H,
    placeholder: x,
    selectableCount: m,
    single: h,
    style: C,
    variables: O,
    ...R
  } = j, z = (H ?? []).map((e, t) => ({
    ...e,
    id: e.id ?? t
  })), E = k(b, ["optionItem", "selectButton"], !0), K = k(b, ["optionItem", "selectButton"]), [N, L] = M(!1), [n, W] = M(z), { context: w, floatingStyles: G, refs: S } = Y({
    middleware: [
      ae({
        apply({ availableHeight: e, elements: t, rects: s }) {
          Object.assign(t.floating.style, {
            maxHeight: `${Math.max(0, e)}px`,
            minWidth: `${s.reference.width}px`
          });
        }
      })
    ],
    onOpenChange: L,
    open: N,
    whileElementsMounted: oe
  }), T = Z(w, {
    enabled: !p
  }), U = ee(w), { getFloatingProps: V, getReferenceProps: _ } = te([T, U]), q = d(() => n.some((e) => le(e.header, !0)), [n]), D = d(() => ie(n, "header"), [n]), i = d(() => {
    if (h) {
      const e = n.find((t) => t.active);
      return e ? [e] : [];
    } else
      return n.filter((e) => e.active);
  }, [n, h]), I = d(() => i.length, [i.length]), v = P(
    (e) => {
      W((t) => t.map((s, l) => ({
        ...s,
        active: h ? l === e : l === e ? !s.active : s.active
      })));
    },
    [h]
  ), J = P(
    (e) => {
      const t = n.findIndex((s) => s.id === e.id);
      t !== -1 && v(t);
    },
    [v, n]
  ), Q = d(() => {
    const e = re(
      !y && `form-select ${f.brlMinH38px}`,
      p && "bg-body-secondary",
      g
    ), t = ce((s, l) => ({ tKey: de(l) }), O, C);
    return {
      className: e,
      style: t,
      tabIndex: p ? void 0 : 0
    };
  }, [g, p, y, C, O]), o = F(E, {
    activeOption: r(
      null,
      "d-flex align-items-center badge text-bg-secondary",
      f.brlCursorDefault
    ),
    bottomDivider: "dropdown-divider",
    clearIcon: r(null, "bi bi-x", f.brlCursorPointer),
    countDisplay: r(
      null,
      "align-self-center flex-shrink-0 text-secondary",
      f.brlScale75
    ),
    floatingMenu: "overflow-y-auto dropdown-menu rounded-3 shadow show",
    header: "dropdown-header",
    mainContainer: r(
      null,
      typeof m == "number" && "d-flex flex-wrap justify-content-between gap-2"
    ),
    optionsContainer: "d-flex flex-wrap column-gap-2 row-gap-1",
    placeholder: "text-secondary user-select-none",
    topDivider: "dropdown-divider"
  });
  return ne(() => {
    u == null || u(i.map((e) => e.id));
  }, [i, u]), /* @__PURE__ */ c($, { ..._(), ...R, ...Q, ref: S.setReference, children: [
    /* @__PURE__ */ c("div", { className: o.mainContainer, "data-slot-main-container": "", children: [
      /* @__PURE__ */ a("div", { className: o.optionsContainer, "data-slot-options-container": "", children: x && i.length === 0 ? /* @__PURE__ */ a("div", { className: o.placeholder, "data-slot-placeholder": "", children: x }) : i.map((e) => /* @__PURE__ */ c("div", { className: o.activeOption, "data-slot-active-option": "", children: [
        e.text,
        /* @__PURE__ */ a(
          "i",
          {
            className: o.clearIcon,
            "data-slot-clear-icon": "",
            onClick: (t) => {
              t.stopPropagation(), J(e);
            },
            tabIndex: -1
          }
        )
      ] }, e.id)) }),
      typeof m == "number" && /* @__PURE__ */ a(
        "div",
        {
          className: o.countDisplay,
          "data-slot-count-display": "",
          children: `${I} / ${m}`
        }
      )
    ] }),
    N && /* @__PURE__ */ a(se, { children: /* @__PURE__ */ a(
      "ul",
      {
        "data-slot-floating-menu": "",
        ref: S.setFloating,
        ...V(),
        className: o.floatingMenu,
        style: G,
        children: D.keys.map((e) => /* @__PURE__ */ c(B, { children: [
          q && /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a("h6", { className: o.header, "data-slot-header": "", children: e }) }, e),
          D.groupedData[e].map(({ index: t, item: s }) => {
            const l = F(K, {
              optionItem: r(null, s.active && A && "visually-hidden"),
              selectButton: r(
                null,
                "dropdown-item",
                s.active && "active",
                (s.disabled || m === I) && "disabled"
              )
            });
            return /* @__PURE__ */ c(B, { children: [
              s.divider === "top" && /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a("hr", { className: o.topDivider, "data-slot-top-divider": "" }) }),
              /* @__PURE__ */ a("li", { className: l.optionItem, "data-slot-option-item": "", children: /* @__PURE__ */ a(
                "button",
                {
                  className: l.selectButton,
                  "data-slot-select-button": "",
                  onClick: (X) => {
                    X.stopPropagation(), v(t);
                  },
                  type: "button",
                  children: s.text
                }
              ) }),
              s.divider === "bottom" && /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a("hr", { className: o.bottomDivider, "data-slot-bottom-divider": "" }) })
            ] }, s.id);
          })
        ] }, e))
      }
    ) })
  ] });
};
pe.displayName = "BRL.SelectMultiple";
export {
  pe as S
};
//# sourceMappingURL=select-multiple.js.map
