import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["children", "open", "unmountOnExit", "component"];
import React from "react";
import PropTypes from "prop-types";
import { m, LazyMotion, domAnimation, AnimatePresence } from "framer-motion";
import createComponent from "../system/createComponent";
var defaultElement = "div";
var Collapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var children = props.children,
      open = props.open,
      unmountOnExit = props.unmountOnExit,
      _props$component = props.component,
      Component = _props$component === void 0 ? defaultElement : _props$component,
      rest = _objectWithoutProperties(props, _excluded);

  var isVisible = !unmountOnExit || open;
  var height = open ? "auto" : 0;
  return /*#__PURE__*/React.createElement(LazyMotion, {
    features: domAnimation,
    strict: true
  }, /*#__PURE__*/React.createElement(Component, _extends({
    ref: ref,
    role: "region",
    "aria-expanded": open
  }, rest), /*#__PURE__*/React.createElement(AnimatePresence, null, isVisible && /*#__PURE__*/React.createElement(m.div, {
    style: {
      overflow: "hidden"
    },
    initial: {
      height: 0
    },
    animate: {
      height: height
    },
    exit: {
      height: 0
    },
    transition: {
      type: "tween"
    }
  }, children))));
}); // @ts-ignore

Collapse.propTypes = {
  open: PropTypes.bool.isRequired,
  className: PropTypes.string,
  component: PropTypes.elementType,
  sx: PropTypes.object,
  unmountOnExit: PropTypes.bool
}; // @ts-ignore

Collapse.defaultProps = {};

if (process.env.NODE_ENV !== "production") {
  // @ts-ignore
  Collapse.displayName = "Collapse";
}

export default createComponent(Collapse);