import React, { useState, useEffect } from 'react';
import { b as _taggedTemplateLiteral, c as _slicedToArray, e as _extends, a as _objectSpread2 } from '../_rollupPluginBabelHelpers-b9ad31fa.js';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import variant from '@styled-system/variant';

var DEFAULT_TRANSITION = {
  transition: "all 0.4s ease"
};
var TIMEOUTS = {
  TRANSITION: 50,
  UNMOUNT: 80
};

var _templateObject;
var defaultStyles = function defaultStyles() {
  return _objectSpread2({}, DEFAULT_TRANSITION);
};
var EntryVariants = variant({
  prop: "entry",
  scale: "entryStyles",
  variants: {}
});
var ExitVariants = variant({
  prop: "exit",
  scale: "exitStyles",
  variants: {}
});
var ActiveVariant = variant({
  prop: "active",
  scale: "activeStyle"
});
var AnimateWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), defaultStyles, function (props) {
  var active = props.active,
    triggerExit = props.triggerExit;
  if (active) return ActiveVariant(props);
  if (triggerExit) return ExitVariants(props);
  return EntryVariants(props);
});
var Animate = function Animate(props) {
  var active = props.active;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    wrapperActive = _useState2[0],
    setWrapperActive = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    wrapperUnmount = _useState4[0],
    setWrapperUnmount = _useState4[1];
  useEffect(function () {
    if (props.active) setWrapperUnmount(false);
    setTimeout(function () {
      setWrapperActive(props.active);
    }, TIMEOUTS.TRANSITION);
  }, [props]);
  var transitionEnd = function transitionEnd() {
    if (!wrapperActive) {
      setTimeout(function () {
        setWrapperUnmount(true);
      }, TIMEOUTS.UNMOUNT);
    }
  };
  return !wrapperUnmount ? /*#__PURE__*/React.createElement(AnimateWrapper
  // eslint-disable-next-line react/jsx-props-no-spreading
  , _extends({}, props, {
    active: wrapperActive,
    onTransitionEnd: transitionEnd,
    triggerExit: !active
  })) : null;
};
Animate.defaultProps = {
  active: true,
  entry: "fade",
  exit: "fade",
  style: {}
};
Animate.propTypes = {
  /** Determines if element is visible */
  active: PropTypes.bool,
  /** Name of entry animation */
  entry: PropTypes.string,
  /** Name of exit animation */
  exit: PropTypes.string,
  /** Pass custom styles (if applicable) */
  style: PropTypes.shape({})
};
Animate.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Animate",
  "props": {
    "active": {
      "defaultValue": {
        "value": "true",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Determines if element is visible"
    },
    "entry": {
      "defaultValue": {
        "value": "\"fade\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Name of entry animation"
    },
    "exit": {
      "defaultValue": {
        "value": "\"fade\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Name of exit animation"
    },
    "style": {
      "defaultValue": {
        "value": "{}",
        "computed": false
      },
      "type": {
        "name": "shape",
        "value": {}
      },
      "required": false,
      "description": "Pass custom styles (if applicable)"
    }
  }
};

export default Animate;
