import { jsx as r, jsxs as b, Fragment as C } from "react/jsx-runtime";
import { useHover as x } from "./index-use-hover.js";
import { classNames as l } from "./index-classNames.js";
import { Avatar as N } from "./index-Avatar.js";
import { CheckBox as z } from "./index-CheckBox.js";
import { Form as E } from "./index-Form.js";
import { Popover as P } from "./index-Popover.js";
import { Render as R } from "./index-Render.js";
import { useState as A, useRef as D, useEffect as F } from "react";
import o from "./index-AvatarCheckbox.module.scss.js";
const q = (f) => {
  const {
    popoverMessage: h,
    disabled: c,
    formConfig: g,
    replacements: p,
    onChange: a,
    checked: i,
    icon: s,
    image: k,
    checkboxFormConfig: u
  } = f, [t, n] = A(i ?? !1), d = D(null), m = x(d), v = s ? {
    size: "large",
    image: null,
    icon: s
  } : {
    size: "large",
    image: k ?? "",
    icon: null
  };
  return F(() => {
    n(i ?? !1);
  }, [i]), r(E, {
    config: g,
    children: r("div", {
      ref: d,
      "data-testid": "avatar-checkbox-container",
      className: l(o.container, m ? o.hovered : void 0, t ? o.checked : void 0, c ? o.disabled : void 0),
      onClick: (e) => {
        c || (n(!t), a && a(!t), e.preventDefault(), e.stopPropagation());
      },
      children: r(P, {
        message: h,
        replacements: p,
        children: b(C, {
          children: [r("span", {
            "data-testid": "avatar-checkbox-test-id",
            className: o.avatar,
            onClick: () => {
              c || n((e) => (a && a(!e), !e));
            },
            children: r(N, {
              ...v,
              size: "medium-40",
              greyScale: c && !t
            })
          }), r(R, {
            if: !c,
            keepInDom: !0,
            children: r("span", {
              className: l(o.checkbox, t ? o.checked : void 0),
              children: r(z, {
                testId: "vanguard-checkbox-container-test-id",
                hovered: m,
                disabled: c,
                _hoverMode: "check",
                formconfig: u,
                _size: "small",
                onChange: (e) => {
                  n(e.target.checked), a && a(e.target.checked);
                },
                checked: t,
                backgroundColor: "--fn-bg"
              })
            })
          })]
        })
      })
    })
  });
};
export {
  q as AvatarCheckbox
};
