import { j as t } from "../../../_virtual/jsx-runtime.js";
import { useRef as ce, useState as l, useEffect as c } from "react";
import { usePopper as de } from "../../../node_modules/react-popper/lib/esm/usePopper.js";
import { useOnClickOutside as pe } from "../../../hooks/useClickOutside.js";
import { useKeyPress as fe } from "../../../hooks/useKeyPress.js";
import he from "../../../icons/AlertCircle.js";
import me from "../../../icons/ChevronDown.js";
import { slugify as xe, getId as U } from "../../../utils/index.js";
import { Wrapper as ge, LabelWrapper as ve, Label as je, Text as ke, Border as we, SupportingText as Ie, ErrorMessage as be, AssistMessage as Pe } from "../styles.js";
import { DropdownPrefix as Se, SelectInput as ye, OptionsPopper as Ce, OptionItem as Oe, OptionItemLabel as $ } from "./styles.js";
import { MultiValueList as De } from "./components/MultiValueList.js";
import { Checkbox as He } from "../checkbox/Checkbox.js";
function $e({
  variant: q,
  id: h,
  name: O,
  label: r,
  required: z,
  placeholder: v,
  hasError: m = !1,
  errorText: j,
  optionalText: G,
  prefix: D,
  assistText: k,
  options: H,
  onOpen: R,
  onClose: B,
  onFocus: W,
  onBlur: J,
  disabled: o = !1,
  maxHeight: N = 300,
  touched: w,
  width: Q,
  noMargin: L = !1,
  ...x
}) {
  var K;
  const d = ce(null), [n, X] = l(
    null
  ), [Y, Z] = l(null), [_, ee] = l(0), [p, g] = l(!1), [I, M] = l(null), [b, te] = l(!1), { value: i, multivalue: s, onChange: f } = x, [E, ie] = l(
    n == null ? void 0 : n.clientHeight
  );
  c(() => {
    te(typeof w > "u" ? m : m && w);
  }, [m, w]);
  const { styles: se, attributes: ne, forceUpdate: F } = de(
    n,
    Y,
    {
      placement: "bottom",
      modifiers: [
        {
          name: "offset",
          options: {
            offset: [0, 2]
          }
        },
        { name: "preventOverflow", options: { padding: { top: 8 } } },
        { name: "flip", options: { padding: { top: 8 } } }
      ]
    }
  ), { containerRef: a } = pe(() => g(!1)), T = fe("Space", a), re = () => {
    o || (g(!0), R && R());
  }, P = () => {
    o || (g(!1), M(null), B && B());
  }, oe = () => p ? P() : re();
  c(() => {
    d && d.current && (p ? (d.current.focus(), W && W()) : d.current.blur());
  }, [p]), c(() => {
    a && a.current && ee(a.current.clientWidth);
  }, [(K = a.current) == null ? void 0 : K.clientWidth]);
  const V = (e) => s ? i.find((C) => C.value === e.value) ? [...i.filter((C) => C.value !== e.value)] : [...i, e] : [];
  c(() => {
    T && I && (f(s ? V(I) : I), !s && P());
  }, [T]), c(() => {
    !s && g(!1);
  }, [o, i, H, m, j]);
  const le = (e) => {
    s && f([...i.filter((u) => String(u.value) !== String(e))]);
  }, S = (e) => {
    f(s ? V(e) : e), !s && P();
  }, ae = (e) => () => {
    M(e);
  };
  c(() => {
    setTimeout(() => {
      (n == null ? void 0 : n.clientHeight) !== E && s && (ie(n == null ? void 0 : n.clientHeight), typeof F == "function" && F());
    });
  }, [n == null ? void 0 : n.clientHeight, E, S]), !h && r && (h = `input-${xe(r)}`);
  const y = U(x["data-testid"]), A = U(x["data-trackid"]), ue = () => s ? /* @__PURE__ */ t.jsx(
    De,
    {
      values: i,
      onRemove: le,
      placeholder: v
    }
  ) : !s && i.label ? i.label : v;
  return /* @__PURE__ */ t.jsxs(
    ge,
    {
      ref: a,
      "data-testid": y("dropdown"),
      "data-trackid": A("dropdown"),
      width: Q,
      noMargin: L,
      children: [
        /* @__PURE__ */ t.jsxs(ve, { disabled: o, hasLabel: !!(r != null && r.length), children: [
          r && /* @__PURE__ */ t.jsx(je, { htmlFor: h, disabled: o, children: r }),
          !z && /* @__PURE__ */ t.jsx(ke, { children: G })
        ] }),
        /* @__PURE__ */ t.jsxs(we, { hasError: b, disabled: o, children: [
          !!D && /* @__PURE__ */ t.jsx(
            Se,
            {
              "data-testid": y("prefix"),
              hasValue: !!(s ? i.length > 0 : i.value),
              children: D
            }
          ),
          /* @__PURE__ */ t.jsxs(
            ye,
            {
              ref: X,
              id: h,
              role: "button",
              "data-testid": y(),
              "data-trackid": A(),
              "aria-haspopup": "true",
              "aria-expanded": p,
              onClick: oe,
              variant: q,
              disabled: o,
              "aria-label": r ? void 0 : x["aria-label"],
              hasText: !!((s ? i.length > 0 : i.label) || v),
              onBlur: J,
              children: [
                ue(),
                /* @__PURE__ */ t.jsx("input", { ref: d, name: O, readOnly: !0 }),
                /* @__PURE__ */ t.jsx(me, { width: 20, height: 20 })
              ]
            }
          )
        ] }),
        p && /* @__PURE__ */ t.jsx(
          Ce,
          {
            role: "listbox",
            ref: Z,
            width: _,
            maxHeight: N,
            style: se.popper,
            ...ne.popper,
            "data-testid": "options-dropdown",
            children: H.map(
              (e) => !e.isHidden && /* @__PURE__ */ t.jsxs(
                Oe,
                {
                  tabIndex: 0,
                  role: "option",
                  isSelected: s ? i.some((u) => u.value === e.value) : e.value === i.value,
                  isDisabled: e.isDisabled,
                  onClick: () => !e.isDisabled && S(e),
                  onFocus: ae(e),
                  "data-trackid": e["data-trackid"],
                  "data-testid": e["data-testid"],
                  "aria-label": e["aria-label"],
                  isMultivalue: s,
                  children: [
                    s ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
                      /* @__PURE__ */ t.jsx(
                        He,
                        {
                          name: O || "multi-select",
                          value: String(e.value),
                          checked: i.some((u) => u.value === e.value),
                          onChange: () => !e.isDisabled && S(e),
                          tabIndex: -1
                        }
                      ),
                      /* @__PURE__ */ t.jsx($, { isMultivalue: !0, children: e.label })
                    ] }) : /* @__PURE__ */ t.jsx($, { children: e.label }),
                    e.altText && /* @__PURE__ */ t.jsx("div", { children: e.altText })
                  ]
                },
                String(e.value)
              )
            )
          }
        ),
        /* @__PURE__ */ t.jsxs(Ie, { noMargin: L, children: [
          !!j && b && !o && /* @__PURE__ */ t.jsxs(be, { children: [
            /* @__PURE__ */ t.jsx(he, { width: 20, height: 20 }),
            j
          ] }),
          !b && (typeof k == "string" ? /* @__PURE__ */ t.jsx(Pe, { children: k }) : k)
        ] })
      ]
    }
  );
}
export {
  $e as Dropdown
};
