import "core-js/modules/es.array.iterator.js";
import "core-js/modules/web.dom-collections.iterator.js";
import { useEffect, useRef, useState } from 'react';
import classNames from 'classnames';
import Button from '../button';
import './style';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
function CollapsedArea({
  minHeight = 32,
  ...props
}) {
  const [open, setOpen] = useState(props.defaultOpen);
  const [contentHeight, setContentHeight] = useState(minHeight);
  const contentRef = useRef(null);

  /**
   * 监听content容器内容变化，即时更新容器最大高度
   */
  useEffect(() => {
    if (contentRef.current) {
      setContentHeight(contentRef.current.offsetHeight);
      const observer = new ResizeObserver(() => {
        if (contentRef.current) {
          setContentHeight(contentRef.current.offsetHeight);
        }
      });
      observer.observe(contentRef.current);
      return () => {
        observer.disconnect();
      };
    }
  }, []);
  return /*#__PURE__*/_jsxs("div", {
    style: props.style,
    className: classNames('collapsed-area', props.className),
    children: [/*#__PURE__*/_jsx(Button, {
      style: {
        ...props.buttonStyle
      },
      className: classNames('collapsed-area-button', props.buttonClassName),
      type: "link",
      onClick: () => setOpen(!open),
      children: open ? props.buttonHiddenText || '收起' : props.buttonShownText || '展开'
    }), /*#__PURE__*/_jsxs("div", {
      className: "collapsed-area-content",
      style: {
        height: open ? contentHeight : minHeight
      },
      children: [/*#__PURE__*/_jsx("div", {
        style: {
          display: `${!open ? 'block' : 'none'}`
        },
        children: props.collapseContent
      }), /*#__PURE__*/_jsx("div", {
        ref: contentRef,
        style: {
          display: `${open || !props.collapseContent ? 'block' : 'none'}`,
          position: 'relative',
          overflow: 'hidden'
        },
        children: props.children
      })]
    })]
  });
}
const defaultProps = {
  defaultOpen: true
};
CollapsedArea.defaultProps = defaultProps;
export default CollapsedArea;