import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
import { jsx } from 'react/jsx-runtime';
import { useRef, useState, useEffect } from 'react';
import { Transition } from 'react-transition-group';
import { g as getTransitionProps, a as getAutoHeightDuration } from '../_verture/util-7e1fb1e2.js';
import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
import '../_verture/unsupportedIterableToArray-cb478f24.js';

var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-collapse-box {\n  transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  width: 100%;\n  overflow: hidden;\n  height: 0;\n}\n.paraui-v3-collapse-box > .collapse-box-wrapper {\n  display: flex;\n  width: 100%;\n}\n.paraui-v3-collapse-box > .collapse-box-wrapper > .collapse-box-wrapper-inner {\n  width: 100%;\n}\n.paraui-v3-collapse-box.paraui-v3-collapse-box-entered {\n  overflow: visible;\n}\n.paraui-v3-collapse-box.paraui-v3-collapse-box-hidden {\n  visibility: hidden;\n}";
styleInject(css_248z);

var CollapseBox = function CollapseBox(props) {
  var className = props.className,
    style = props.style,
    open = props.in,
    _props$collapsedHeigh = props.collapsedHeight,
    collapsedHeightProp = _props$collapsedHeigh === void 0 ? '0px' : _props$collapsedHeigh,
    _props$timeout = props.timeout,
    timeout = _props$timeout === void 0 ? 'auto' : _props$timeout,
    unmountOnExit = props.unmountOnExit,
    _children = props.children;
  // timer
  var timer = useRef(null);
  // 动画节点
  var nodeRef = useRef(null);
  // 内置容器
  var wrapperRef = useRef(null);
  // 存储动画时间变量
  var autoTransitionDuration = useRef(null);
  // 下拉收起的高度
  var collapsedHeight = typeof collapsedHeightProp === 'number' ? "".concat(collapsedHeightProp, "px") : collapsedHeightProp;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    inProp = _useState2[0],
    setInProp = _useState2[1];
  useEffect(function () {
    return function () {
      clearTimeout(timer.current);
    };
  }, []);
  useEffect(function () {
    setInProp(open);
  }, [open]);
  // 处理节点
  var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
    return function (nodeOrAppearing) {
      if (callback) {
        callback(nodeOrAppearing);
      }
    };
  };
  // 下拉
  var handleEnter = normalizedTransitionCallback(function (node) {
    node.style.height = collapsedHeight;
  });
  var handleEntering = normalizedTransitionCallback(function (node) {
    var wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;
    var _getTransitionProps = getTransitionProps({
        style: style,
        timeout: timeout
      }, {
        mode: 'enter'
      }),
      transitionDuration = _getTransitionProps.duration;
    if (timeout === 'auto') {
      var duration2 = getAutoHeightDuration(wrapperHeight);
      node.style.transitionDuration = "".concat(duration2, "ms");
      autoTransitionDuration.current = duration2;
    } else {
      node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : "".concat(transitionDuration, "ms");
    }
    node.style.height = "".concat(wrapperHeight, "px");
  });
  var handleEntered = normalizedTransitionCallback(function (node) {
    node.style.height = 'auto';
  });
  // 收起
  var handleExit = normalizedTransitionCallback(function (node) {
    var wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;
    node.style.height = "".concat(wrapperHeight, "px");
  });
  var handleExiting = normalizedTransitionCallback(function (node) {
    var wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;
    var _getTransitionProps2 = getTransitionProps({
        style: style,
        timeout: timeout
      }, {
        mode: 'exit'
      }),
      transitionDuration = _getTransitionProps2.duration;
    if (timeout === 'auto') {
      var duration2 = getAutoHeightDuration(wrapperHeight);
      node.style.transitionDuration = "".concat(duration2, "ms");
      autoTransitionDuration.current = duration2;
    } else {
      node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : "".concat(transitionDuration, "ms");
    }
    node.style.height = collapsedHeight;
  });
  // 完成下拉/收起回调
  var addEndListener = function addEndListener(nodeOrNext, maybeNext) {
    timer.current = setTimeout(maybeNext, autoTransitionDuration.current || 0);
  };
  // 处理className
  var handClass = function handClass(state) {
    var str = $prefixCls + '-collapse-box';
    if (className) str += ' ' + className;
    if (state === 'entered') str += " ".concat($prefixCls, "-collapse-box-entered");
    if (state === 'exited' && !inProp && collapsedHeight === '0px') str += " ".concat($prefixCls, "-collapse-box-hidden");
    return str;
  };
  return jsx(Transition, Object.assign({
    in: inProp,
    unmountOnExit: unmountOnExit,
    onEnter: handleEnter,
    onEntered: handleEntered,
    onEntering: handleEntering,
    onExit: handleExit,
    onExiting: handleExiting,
    //nodeRef={nodeRef}
    timeout: timeout === 'auto' ? undefined : timeout,
    addEndListener: addEndListener
  }, {
    children: function children(state, childProps) {
      return jsx("div", Object.assign({
        className: handClass(state),
        style: Object.assign({
          minHeight: collapsedHeight
        }, style),
        ref: nodeRef
      }, childProps, {
        children: jsx("div", Object.assign({
          className: 'collapse-box-wrapper',
          ref: wrapperRef
        }, {
          children: jsx("div", Object.assign({
            className: 'collapse-box-wrapper-inner'
          }, {
            children: _children
          }))
        }))
      }));
    }
  }));
};

export { CollapseBox as default };
