import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
/* "use client" */

import React, { useEffect, useState } from 'react';
var CssTransition = function CssTransition(_ref) {
  var children = _ref.children,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? '' : _ref$className,
    _ref$visible = _ref.visible,
    visible = _ref$visible === void 0 ? false : _ref$visible,
    _ref$enterTime = _ref.enterTime,
    enterTime = _ref$enterTime === void 0 ? 60 : _ref$enterTime,
    _ref$leaveTime = _ref.leaveTime,
    leaveTime = _ref$leaveTime === void 0 ? 60 : _ref$leaveTime,
    _ref$clearTime = _ref.clearTime,
    clearTime = _ref$clearTime === void 0 ? 60 : _ref$clearTime,
    _ref$name = _ref.name,
    name = _ref$name === void 0 ? 'transition' : _ref$name,
    props = _objectWithoutProperties(_ref, _excluded);
  var _useState = useState(''),
    _useState2 = _slicedToArray(_useState, 2),
    classes = _useState2[0],
    setClasses = _useState2[1];
  var _useState3 = useState(visible),
    _useState4 = _slicedToArray(_useState3, 2),
    renderable = _useState4[0],
    setRenderable = _useState4[1];
  useEffect(function () {
    var statusClassName = visible ? 'enter' : 'leave';
    var time = visible ? enterTime : leaveTime;
    if (visible && !renderable) {
      setRenderable(true);
    }
    setClasses("".concat(name, "-").concat(statusClassName));

    // set class to active
    var timer = setTimeout(function () {
      setClasses("".concat(name, "-").concat(statusClassName, " ").concat(name, "-").concat(statusClassName, "-active"));
      clearTimeout(timer);
    }, time);

    // remove classess when animation over
    var clearClassesTimer = setTimeout(function () {
      if (!visible) {
        setClasses('');
        setRenderable(false);
      }
      clearTimeout(clearClassesTimer);
    }, time + clearTime);
    return function () {
      clearTimeout(timer);
      clearTimeout(clearClassesTimer);
    };
  }, [visible, renderable]);
  if (! /*#__PURE__*/React.isValidElement(children) || !renderable) return null;
  var propsTransition = _extends({}, props, {
    className: "".concat(children.props.className, " ").concat(className, " ").concat(classes)
  });
  return /*#__PURE__*/React.cloneElement(children, propsTransition);
};
CssTransition.displayName = 'CssTransition';
export default CssTransition;