"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _delayRaf = _interopRequireDefault(require("../components/rc-util/delayRaf"));

var _context = require("../config-provider/context");

var styleTag;
var animationAttr = "".concat((0, _context.getPrefixClassName)(''), "-ripple-animation");

var Ripple = function Ripple(props) {
  var children = props.children;
  var cnode = null;
  var curNode;

  var newChild = /*#__PURE__*/_react.default.cloneElement(children, {
    className: children.props.className,
    ref: function ref(node) {
      cnode = node;
    }
  });

  var rippleAnimation = (0, _react.useRef)({
    isStart: false,
    animationId: null,
    timeoutId: null,
    onAnimationStart: function onAnimationStart(e) {
      if (!e || rippleAnimation.current.isStart) {
        return;
      }

      resetEffect(e.target);
    },
    onAnimationEnd: function onAnimationEnd(e) {
      if (!e || e.animationName !== 'fadeEffect') {
        return;
      }

      resetEffect(e.target);
    }
  });

  var resetEffect = function resetEffect(node) {
    node.setAttribute(animationAttr, 'false');
    node.removeEventListener('animationstart', rippleAnimation.current.onAnimationStart);
    node.removeEventListener('animationend', rippleAnimation.current.onAnimationEnd);
  };

  var createStyle = function createStyle(node) {
    var rippleColor = getComputedStyle(node).getPropertyValue('border-top-color') || getComputedStyle(node).getPropertyValue('border-color') || getComputedStyle(node).getPropertyValue('background-color');
    styleTag = styleTag || document.createElement('style');
    styleTag.innerHTML = "\n      [".concat(animationAttr, "='true']::after {\n        --klein-ripple-shadow-color: ").concat(rippleColor, ";\n      }\n    ");

    if (!document.body.contains(styleTag)) {
      document.body.appendChild(styleTag);
    }
  };

  var init = function init(node) {
    node.addEventListener('click', function () {
      resetEffect(node);
      rippleAnimation.current.timeoutId = window.setTimeout(function () {
        node.setAttribute(animationAttr, 'true');
        createStyle(node);
        node.addEventListener('animationstart', rippleAnimation.current.onAnimationStart);
        node.addEventListener('animationend', rippleAnimation.current.onAnimationEnd);
      }, 0);

      _delayRaf.default.cancel(rippleAnimation.current.animationId);

      rippleAnimation.current.isStart = true;
      rippleAnimation.current.animationId = (0, _delayRaf.default)(function () {
        rippleAnimation.current.isStart = false;
      }, 10);
    }, true);
  };

  var clearEffect = function clearEffect() {
    resetEffect(curNode);
    clearTimeout(rippleAnimation.current.timeoutId);

    if (styleTag) {
      styleTag.innerHTML = '';
    }
  };

  (0, _react.useEffect)(function () {
    if (!cnode) return;
    init(cnode);
    curNode = cnode;
    return clearEffect;
  }, []);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, newChild);
};

var _default = Ripple;
exports.default = _default;