import { jsxs as P, jsx as t } from "react/jsx-runtime";
import { useButton as Q } from "@react-aria/button";
import { useFocusRing as Y, FocusScope as Z } from "@react-aria/focus";
import { useState as p, useRef as O, useId as $, useEffect as h, useLayoutEffect as I } from "react";
import { usePopper as K } from "react-popper";
import { CheckboxState as ee } from "../Checkbox/Checkbox.es.js";
import { Checklist as te, ChecklistDirection as oe } from "../Checklist/Checklist.es.js";
import { Tag as y, TagSize as d, TagType as z } from "../Tag/Tag.es.js";
import { Trigger as le, TriggerEmphasis as re } from "../Trigger/Trigger.es.js";
import { useDropdownAutoHeight as se, DEFAULT_DROPDOWN_MAX_HEIGHT as ne } from "../../hooks/useDropdownAutoHeight.es.js";
import { EnablePortalWrapper as ae } from "../../utilities/dialogs/EnablePortalWrapper.es.js";
import { merge as ie } from "../../utilities/merge.es.js";
import { Validation as ce } from "../../utilities/validation.es.js";
import { useClickOutside as ue, getPaddingClasses as pe } from "./helpers.es.js";
var de = /* @__PURE__ */ ((o) => (o.Default = "Default", o.Summarized = "Summarized", o))(de || {}), fe = /* @__PURE__ */ ((o) => (o.Small = "Small", o.Medium = "Medium", o))(fe || {});
const we = ({
  items: o,
  activeItemKeys: r,
  onSelectionChange: f,
  ariaLabel: g = "Select list",
  disabled: x = !1,
  placeholder: b,
  label: S,
  type: v = "Default",
  size: w = "Medium",
  validation: F = ce.Default,
  summarizedLabel: D,
  indeterminateItemKeys: s,
  flip: R = !1,
  emphasis: A = re.Default,
  enablePortal: V = !0
}) => {
  const [a, c] = p(!1), [H, L] = p([]), n = O(null), [k, C] = p(null), [i, j] = p(null), B = O(null), { isFocusVisible: W, focusProps: _ } = Y(), { maxHeight: E } = se({ current: i }, { isOpen: a, autoResize: !0 }), T = r.length > 0, G = D ?? [r.length, "selected"].join(" ");
  ue(null, () => c(!1), [n == null ? void 0 : n.current, k]);
  const U = E !== ne, M = $(), m = () => c((e) => !e), { buttonProps: X } = Q(
    {
      onPress: m,
      onKeyDown: (e) => {
        e.key === "Escape" && c(!1);
      },
      elementType: "div"
    },
    { current: i }
  ), q = (e) => {
    const l = new Set(r);
    l.has(e) ? l.delete(e) : l.add(e), f(Array.from(l));
  }, J = (e) => {
    (e.code === "Space" || e.code === "Enter") && m();
  }, N = () => a ? z.SelectedWithFocus : z.Selected;
  h(() => {
    C(n == null ? void 0 : n.current);
  }, []), h(() => {
    L(
      o.map((e) => {
        const l = { ...e, label: e.value };
        return s != null && s.includes(e.value) ? { ...l, state: ee.Mixed } : l;
      })
    );
  }, [o, s]);
  const u = K(i, k, {
    placement: "bottom-start",
    strategy: "fixed",
    modifiers: [
      {
        name: "offset",
        options: {
          offset: [0, 8]
        }
      },
      {
        name: "flip",
        enabled: R
      }
    ]
  });
  return h(() => {
    (async () => {
      u.update && await u.update();
    })().catch(console.error);
  }, [r]), I(() => {
    const e = (l) => {
      l.key === "Escape" && c(!1);
    };
    return window.addEventListener("keyup", e), () => {
      window.removeEventListener("keyup", e);
    };
  }, []), /* @__PURE__ */ P("div", { className: "tw-relative", ref: n, children: [
    /* @__PURE__ */ t(
      le,
      {
        disabled: x,
        buttonProps: X,
        isFocusVisible: W,
        isOpen: a,
        validation: F,
        emphasis: A,
        children: /* @__PURE__ */ t("div", { className: ie(["tw-flex tw-flex-1 tw-gap-2", pe(w)]), ref: j, children: /* @__PURE__ */ t(
          "div",
          {
            className: "tw-flex tw-flex-1 tw-gap-2 focus:tw-outline-0",
            onClick: (e) => {
              e.target === B.current && a || m();
            },
            role: "combobox",
            "aria-expanded": a,
            "aria-controls": M,
            "aria-label": g,
            ..._,
            tabIndex: 0,
            onKeyDown: J,
            children: /* @__PURE__ */ P("div", { className: "tw-flex tw-flex-wrap tw-gap-2 tw-outline-none tw-items-center tw-min-h-[28px]", children: [
              S && T && /* @__PURE__ */ t("span", { className: "tw-body-medium-strong tw-text-primary", children: S }),
              v === "Default" && r.map((e) => /* @__PURE__ */ t(
                y,
                {
                  type: N(),
                  label: e.toString(),
                  size: w === "Small" ? d.Small : d.Medium,
                  onClick: x ? void 0 : () => q(e)
                },
                e
              )),
              v === "Summarized" && (T || D) && /* @__PURE__ */ t(
                y,
                {
                  type: N(),
                  label: G,
                  size: w === "Small" ? d.Small : d.Medium,
                  onClick: (s == null ? void 0 : s.length) === 0 ? () => f([]) : void 0
                }
              ),
              r.length === 0 && b && /* @__PURE__ */ t("span", { className: "tw-body-medium tw-text-secondary", children: b })
            ] })
          }
        ) })
      }
    ),
    a && U && /* @__PURE__ */ t(ae, { enablePortal: V, children: /* @__PURE__ */ t(
      "div",
      {
        id: M,
        ref: C,
        className: "tw-absolute tw-left-0 tw-w-full tw-overflow-hidden tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-[120000] tw-bg-base tw-min-w-72",
        style: {
          ...u.styles.popper,
          width: i == null ? void 0 : i.getBoundingClientRect().width
        },
        ...u.attributes.popper,
        children: /* @__PURE__ */ t(Z, { restoreFocus: !0, children: /* @__PURE__ */ t(
          "div",
          {
            className: "tw-p-4 tw-overflow-y-auto tw-overflow-x-hidden tw-w-full tw-relative",
            style: { maxHeight: E },
            children: /* @__PURE__ */ t(
              te,
              {
                activeValues: r.map((e) => e.toString()),
                setActiveValues: f,
                checkboxes: H.filter((e) => !e.isDivider && !e.isCategory),
                direction: oe.Vertical,
                ariaLabel: g
              }
            )
          }
        ) })
      },
      "content"
    ) })
  ] });
};
we.displayName = "FondueMultiSelect";
export {
  we as MultiSelect,
  fe as MultiSelectSize,
  de as MultiSelectType
};
//# sourceMappingURL=MultiSelect.es.js.map
