import { withNativeProps as v } from "../../utils/native-props.mjs";
import r, { useRef as b, useMemo as k, useState as g } from "react";
import { useUnmountedRef as y } from "ahooks";
import { useLockScroll as C } from "../../utils/use-lock-scroll.mjs";
import { a as R } from "../../../../@react-spring/web/dist/react-spring-web.esm.mjs";
import { renderToContainer as h } from "../../utils/render-to-container.mjs";
import { mergeProps as S } from "../../utils/with-default-props.mjs";
import { ShouldRender as P } from "../../utils/should-render.mjs";
import { withStopPropagation as M } from "../../utils/with-stop-propagation.mjs";
import { useConfig as _ } from "../config-provider/config-provider.mjs";
import { useSpring as O } from "../../../../@react-spring/core/dist/react-spring-core.esm.mjs";
const i = "adm-mask", w = {
  default: 0.55,
  thin: 0.35,
  thick: 0.75
}, E = {
  black: "0, 0, 0",
  white: "255, 255, 255"
}, N = {
  visible: !0,
  destroyOnClose: !1,
  forceRender: !1,
  color: "black",
  opacity: "default",
  disableBodyScroll: !0,
  getContainer: null,
  stopPropagation: ["click"]
}, F = (s) => {
  const o = S(N, s), {
    locale: d
  } = _(), a = b(null);
  C(a, o.visible && o.disableBodyScroll);
  const m = k(() => {
    var e;
    const t = (e = w[o.opacity]) !== null && e !== void 0 ? e : o.opacity, c = E[o.color];
    return c ? `rgba(${c}, ${t})` : o.color;
  }, [o.color, o.opacity]), [n, l] = g(o.visible), f = y(), {
    opacity: p
  } = O({
    opacity: o.visible ? 1 : 0,
    config: {
      precision: 0.01,
      mass: 1,
      tension: 250,
      friction: 30,
      clamp: !0
    },
    onStart: () => {
      l(!0);
    },
    onRest: () => {
      var e, t;
      f.current || (l(o.visible), o.visible ? (e = o.afterShow) === null || e === void 0 || e.call(o) : (t = o.afterClose) === null || t === void 0 || t.call(o));
    }
  }), u = M(o.stopPropagation, v(o, r.createElement(R.div, {
    className: i,
    ref: a,
    "aria-hidden": !0,
    style: Object.assign(Object.assign({}, o.style), {
      background: m,
      opacity: p,
      display: n ? void 0 : "none"
    }),
    onClick: (e) => {
      var t;
      e.target === e.currentTarget && ((t = o.onMaskClick) === null || t === void 0 || t.call(o, e));
    }
  }, o.onMaskClick && r.createElement("div", {
    className: `${i}-aria-button`,
    role: "button",
    "aria-label": d.Mask.name,
    onClick: o.onMaskClick
  }), r.createElement("div", {
    className: `${i}-content`
  }, o.children))));
  return r.createElement(P, {
    active: n,
    forceRender: o.forceRender,
    destroyOnClose: o.destroyOnClose
  }, h(o.getContainer, u));
};
export {
  F as Mask
};
