import { jsxs as g, jsx as t } from "react/jsx-runtime";
/* empty css                    */
import { useAppDispatch as q } from "./index-use-app-dispatch.js";
import { useHover as F } from "./index-use-hover.js";
import { classNames as o } from "./index-classNames.js";
import { parseCssVariable as G } from "./index-css-variables-parser.js";
import { CheckBoxIcon as J } from "./index-CheckBoxIcon.js";
import { ComponentContainer as K } from "./index-ComponentContainer.js";
import { useRef as z, useState as b, useEffect as d } from "react";
import { Text as O } from "./index-Text.js";
const ae = (m) => {
  const {
    formconfig: e,
    label: v,
    checked: i = !1,
    hovered: r,
    intermediate: V = !1,
    onChange: x,
    className: H,
    inputRef: I,
    labelClassName: C,
    labelWordBreak: _,
    disabled: c,
    testId: y,
    translate: B,
    replacements: M,
    _size: S = "large",
    _hoverMode: j = "border"
  } = m;
  let {
    backgroundColor: l
  } = m;
  const T = q(), f = z(null), [a, u] = b(i), [w, A] = b(r), N = F(f);
  d(() => {
    const s = r !== void 0 && r;
    A(s || N);
  }, [N, r]);
  const h = S, R = j ?? "border";
  l && (l = G(l));
  const [n, D] = b((e == null ? void 0 : e._inputRef) ?? I ?? z(null));
  d(() => {
    e != null && e._inputRef && (e.fieldType = "Checkbox", D(e == null ? void 0 : e._inputRef));
  }, []), d(() => {
    (e == null ? void 0 : e.stateValue) !== void 0 && e.stateValue !== null && u(e == null ? void 0 : e.stateValue);
  }, [e == null ? void 0 : e.stateValue]), d(() => {
    u(i);
  }, [i]);
  const E = (s, k) => {
    if (typeof s == "string") {
      let p = "--n600";
      return k && (p = "--n900"), c && (p = "--n500"), t(O, {
        className: C,
        color: p,
        translate: B,
        replacements: M,
        wordBreak: _,
        children: s
      });
    }
    return t("span", {
      className: C,
      children: s
    });
  }, L = () => {
    n && n.current && n.current.click();
  }, W = (s) => {
    u((k) => !k), e != null && e.setStateValue && T(e.setStateValue(!a)), x && x(s);
  };
  return g(K, {
    innerRef: f,
    className: o("vanguard-checkbox-container", a ? "vanguard-checkbox-checked" : "", c ? "vanguard-checkbox-disabled" : "", R === "check" ? "hover-mode-check" : "", H),
    onClick: L,
    testId: y,
    children: [g("div", {
      style: {
        backgroundColor: l,
        borderRadius: "6px"
      },
      className: o("vanguard-checkbox-input-content"),
      children: [t("input", {
        ref: n,
        type: "checkbox",
        checked: a,
        disabled: c,
        className: o("vanguard-checkbox-input", h === "large" ? "cb-size-large" : "cb-size-small"),
        onChange: (s) => {
          c || W(s);
        }
      }), t("div", {
        className: o("vanguard-checkbox", h === "large" ? "cb-size-large" : "cb-size-small"),
        children: t(J, {
          isChecked: a,
          intermediate: V,
          size: h,
          isHovered: w,
          hoverMode: R
        })
      })]
    }), v && t("div", {
      className: "vanguard-checkbox-label",
      children: E(v, a)
    })]
  });
};
export {
  ae as CheckBox
};
