import _JSXStyle from "styled-jsx/style";
// Generated with util/create-component.js
import React, { useEffect, useRef, useState } from "react";
import classnames from "classnames";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
export const Collapsible = props => {
  const {
    open,
    as = null,
    header,
    children,
    icon = null,
    contentStyle = {},
    headerStyle = {},
    className,
    ...otherProps
  } = props;
  const [height, setHeight] = useState(open ? undefined : 0);
  const ref = useRef(null);
  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]);
  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__*/_jsx(_Fragment, {
    children: /*#__PURE__*/_jsxs(Component, {
      "data-testid": "Wps-Collapsible",
      ...otherProps,
      className: "jsx-223962372" + " " + (otherProps && otherProps.className != null && otherProps.className || classnames("Wps-CollapsibleWrapper", className) || ""),
      children: [/*#__PURE__*/_jsxs("div", {
        style: headerStyle,
        className: "jsx-223962372" + " " + "Wps-CollapsibleHeader",
        children: [header, icon !== null ? icon !== false ? /*#__PURE__*/_jsxs("span", {
          style: {
            paddingLeft: 5
          },
          className: "jsx-223962372",
          children: [" ", icon, " "]
        }) : "" : /*#__PURE__*/_jsx("div", {
          className: "jsx-223962372" + " " + `Wps-CollapsibleIconContainer ${open ? "Wps-IconRotate down" : "Wps-IconRotate up"}`,
          children: "\u276F"
        })]
      }), /*#__PURE__*/_jsx("div", {
        style: {
          width: "100%",
          height
        },
        className: "jsx-223962372" + " " + "Wps-CollapsiblePanel",
        children: /*#__PURE__*/_jsx("div", {
          ref: ref,
          className: "jsx-223962372",
          children: /*#__PURE__*/_jsx("div", {
            style: contentStyle,
            className: "jsx-223962372" + " " + "Wps-CollapsibleContent",
            children: children
          })
        })
      }), /*#__PURE__*/_jsx(_JSXStyle, {
        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;}"
      })]
    })
  });
};