import z from "../../../../classnames/index.mjs";
import A from "../../../../rc-motion/es/CSSMotion.mjs";
import "../../../../rc-motion/es/CSSMotionList.mjs";
import * as s from "react";
import { render as F, unmount as j } from "../../../../rc-util/es/React/render.mjs";
import p from "../../../../rc-util/es/raf.mjs";
import { getTargetWaveColor as q } from "./util.mjs";
import { TARGET_CLS as H } from "./interface.mjs";
function d(t) {
  return Number.isNaN(t) ? 0 : t;
}
const $ = (t) => {
  const {
    className: l,
    target: e,
    component: c
  } = t, n = s.useRef(null), [u, v] = s.useState(null), [b, h] = s.useState([]), [R, S] = s.useState(0), [y, E] = s.useState(0), [N, C] = s.useState(0), [w, W] = s.useState(0), [T, L] = s.useState(!1), f = {
    left: R,
    top: y,
    width: N,
    height: w,
    borderRadius: b.map((r) => `${r}px`).join(" ")
  };
  u && (f["--wave-color"] = u);
  function m() {
    const r = getComputedStyle(e);
    v(q(e));
    const o = r.position === "static", {
      borderLeftWidth: a,
      borderTopWidth: i
    } = r;
    S(o ? e.offsetLeft : d(-parseFloat(a))), E(o ? e.offsetTop : d(-parseFloat(i))), C(e.offsetWidth), W(e.offsetHeight);
    const {
      borderTopLeftRadius: g,
      borderTopRightRadius: k,
      borderBottomLeftRadius: B,
      borderBottomRightRadius: O
    } = r;
    h([g, k, O, B].map((_) => d(parseFloat(_))));
  }
  if (s.useEffect(() => {
    if (e) {
      const r = p(() => {
        m(), L(!0);
      });
      let o;
      return typeof ResizeObserver < "u" && (o = new ResizeObserver(m), o.observe(e)), () => {
        p.cancel(r), o == null || o.disconnect();
      };
    }
  }, []), !T)
    return null;
  const x = (c === "Checkbox" || c === "Radio") && (e == null ? void 0 : e.classList.contains(H));
  return /* @__PURE__ */ s.createElement(A, {
    visible: !0,
    motionAppear: !0,
    motionName: "wave-motion",
    motionDeadline: 5e3,
    onAppearEnd: (r, o) => {
      var a;
      if (o.deadline || o.propertyName === "opacity") {
        const i = (a = n.current) === null || a === void 0 ? void 0 : a.parentElement;
        j(i).then(() => {
          i == null || i.remove();
        });
      }
      return !1;
    }
  }, (r) => {
    let {
      className: o
    } = r;
    return /* @__PURE__ */ s.createElement("div", {
      ref: n,
      className: z(l, {
        "wave-quick": x
      }, o),
      style: f
    });
  });
}, D = (t, l) => {
  var e;
  const {
    component: c
  } = l;
  if (c === "Checkbox" && !(!((e = t.querySelector("input")) === null || e === void 0) && e.checked))
    return;
  const n = document.createElement("div");
  n.style.position = "absolute", n.style.left = "0px", n.style.top = "0px", t == null || t.insertBefore(n, t == null ? void 0 : t.firstChild), F(/* @__PURE__ */ s.createElement($, Object.assign({}, l, {
    target: t
  })), n);
}, U = D;
export {
  U as default
};
