'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../utils/index.cjs');
require('../../../hooks/index.cjs');
var util = require('./util.cjs');
var propType = require('../../../utils/vue/propType.cjs');
var index = require('../../../hooks/use-state/index.cjs');
var raf = require('../../../utils/vue/raf.cjs');

function validateNum(value) {
  return Number.isNaN(value) ? 0 : value;
}
const WaveEffect = /* @__PURE__ */ vue.defineComponent({
  props: {
    target: propType.objectType(),
    className: String
  },
  setup(props) {
    const divRef = vue.shallowRef(null);
    const [color, setWaveColor] = index.useState(null);
    const [borderRadius, setBorderRadius] = index.useState([]);
    const [left, setLeft] = index.useState(0);
    const [top, setTop] = index.useState(0);
    const [width, setWidth] = index.useState(0);
    const [height, setHeight] = index.useState(0);
    const [enabled, setEnabled] = index.useState(false);
    function syncPos() {
      const {
        target
      } = props;
      const nodeStyle = getComputedStyle(target);
      setWaveColor(util.getTargetWaveColor(target));
      const isStatic = nodeStyle.position === "static";
      const {
        borderLeftWidth,
        borderTopWidth
      } = nodeStyle;
      setLeft(isStatic ? target.offsetLeft : validateNum(-Number.parseFloat(borderLeftWidth)));
      setTop(isStatic ? target.offsetTop : validateNum(-Number.parseFloat(borderTopWidth)));
      setWidth(target.offsetWidth);
      setHeight(target.offsetHeight);
      const {
        borderTopLeftRadius,
        borderTopRightRadius,
        borderBottomLeftRadius,
        borderBottomRightRadius
      } = nodeStyle;
      setBorderRadius([borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius].map((radius) => validateNum(Number.parseFloat(radius))));
    }
    let resizeObserver;
    let rafId;
    let timeoutId;
    const clear = () => {
      clearTimeout(timeoutId);
      raf.raf.cancel(rafId);
      resizeObserver == null ? void 0 : resizeObserver.disconnect();
    };
    const removeDom = () => {
      var _a;
      const holder = (_a = divRef.value) == null ? void 0 : _a.parentElement;
      if (holder) {
        vue.render(null, holder);
        if (holder.parentElement)
          holder.parentElement.removeChild(holder);
      }
    };
    vue.onMounted(() => {
      clear();
      timeoutId = setTimeout(() => {
        removeDom();
      }, 5e3);
      const {
        target
      } = props;
      if (target) {
        rafId = raf.raf(() => {
          syncPos();
          setEnabled(true);
        });
        if (typeof ResizeObserver !== "undefined") {
          resizeObserver = new ResizeObserver(syncPos);
          resizeObserver.observe(target);
        }
      }
    });
    vue.onBeforeUnmount(() => {
      clear();
    });
    const onTransitionend = (e) => {
      if (e.propertyName === "opacity")
        removeDom();
    };
    return () => {
      if (!enabled.value)
        return null;
      const waveStyle = {
        left: `${left.value}px`,
        top: `${top.value}px`,
        width: `${width.value}px`,
        height: `${height.value}px`,
        borderRadius: borderRadius.value.map((radius) => `${radius}px`).join(" ")
      };
      if (color)
        waveStyle["--wave-color"] = color.value;
      return vue.createVNode(vue.Transition, {
        "appear": true,
        "name": "wave-motion",
        "appearFromClass": "wave-motion-appear",
        "appearActiveClass": "wave-motion-appear",
        "appearToClass": "wave-motion-appear wave-motion-appear-active"
      }, {
        default: () => [vue.createVNode("div", {
          "ref": divRef,
          "class": props.className,
          "style": waveStyle,
          "onTransitionend": onTransitionend
        }, null)]
      });
    };
  }
});
function showWaveEffect(node, className) {
  const holder = document.createElement("div");
  holder.style.position = "absolute";
  holder.style.left = "0px";
  holder.style.top = "0px";
  node == null ? void 0 : node.insertBefore(holder, node == null ? void 0 : node.firstChild);
  vue.render(vue.createVNode(WaveEffect, {
    "target": node,
    "className": className
  }, null), holder);
}

exports.default = showWaveEffect;
//# sourceMappingURL=WaveEffect.cjs.map
