"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.Collapsible = void 0;

var _style = _interopRequireDefault(require("styled-jsx/style"));

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _jsxRuntime = require("react/jsx-runtime");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

// Generated with util/create-component.js
const Collapsible = props => {
  const {
    open,
    as = null,
    header,
    children,
    icon = null,
    contentStyle = {},
    headerStyle = {},
    className,
    ...otherProps
  } = props;
  const [height, setHeight] = (0, _react.useState)(open ? undefined : 0);
  const ref = (0, _react.useRef)(null);
  (0, _react.useEffect)(() => {
    if (!height || !open || !ref.current) return undefined; // @ts-ignore

    const resizeObserver = new ResizeObserver(el => {
      setHeight(el[0].contentRect.height);
    });
    resizeObserver.observe(ref.current);
    return () => {
      resizeObserver.disconnect();
    };
  }, [height, open]);
  (0, _react.useEffect)(() => {
    var _ref$current;

    if (open) setHeight((_ref$current = ref.current) == null ? void 0 : _ref$current.getBoundingClientRect().height);else setHeight(0);
  }, [open]); // Component

  const Component = as || "div";
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, {
      "data-testid": "Wps-Collapsible",
      ...otherProps,
      className: "jsx-223962372" + " " + (otherProps && otherProps.className != null && otherProps.className || (0, _classnames.default)("Wps-CollapsibleWrapper", className) || ""),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        style: headerStyle,
        className: "jsx-223962372" + " " + "Wps-CollapsibleHeader",
        children: [header, icon !== null ? icon !== false ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
          style: {
            paddingLeft: 5
          },
          className: "jsx-223962372",
          children: [" ", icon, " "]
        }) : "" : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "jsx-223962372" + " " + `Wps-CollapsibleIconContainer ${open ? "Wps-IconRotate down" : "Wps-IconRotate up"}`,
          children: "\u276F"
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        style: {
          width: "100%",
          height
        },
        className: "jsx-223962372" + " " + "Wps-CollapsiblePanel",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          ref: ref,
          className: "jsx-223962372",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            style: contentStyle,
            className: "jsx-223962372" + " " + "Wps-CollapsibleContent",
            children: children
          })
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
        id: "223962372",
        children: ".Wps-CollapsibleWrapper.jsx-223962372{-webkit-transition:0.3s;transition:0.3s;}.Wps-CollapsiblePanel.jsx-223962372{overflow:hidden;-webkit-transition:height 0.2s ease-in-out;transition:height 0.2s ease-in-out;}.Wps-CollapsibleHeader.jsx-223962372{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;}.Wps-IconRotate.jsx-223962372{-moz-transition:all 0.2s linear;-webkit-transition:all 0.2s linear;-webkit-transition:all 0.2s linear;transition:all 0.2s linear;}.Wps-IconRotate.down.jsx-223962372{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}.Wps-IconRotate.up.jsx-223962372{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}.Wps-CollapsibleIconContainer.jsx-223962372{cursor:pointer;background-color:Transparent;background-repeat:no-repeat;border:none;cursor:pointer;overflow:hidden;outline:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"
      })]
    })
  });
};

exports.Collapsible = Collapsible;