import React, { useRef, useEffect } from "react";
import { useResizeObserver } from "../../utils";
import { IconButton } from "../IconButton";
import { ArrowLeftIcon } from "../Icons";
import { MenuHeader } from "../Menu";
export const Submenu = _ref => {
  let {
    onBack,
    onHeightChange,
    style,
    children,
    title,
    indexPage
  } = _ref;
  const ref = useRef(null);
  const dimensions = useResizeObserver(ref);
  const height = dimensions == null ? void 0 : dimensions.height;
  useEffect(() => {
    if (height && height > 0 && !indexPage) {
      onHeightChange == null || onHeightChange(height);
    }
  }, [height, onHeightChange, indexPage]);
  return /*#__PURE__*/React.createElement("div", {
    style: style,
    ref: ref
  }, /*#__PURE__*/React.createElement(MenuHeader, {
    title: title,
    leftElement: /*#__PURE__*/React.createElement(IconButton, {
      onClick: onBack,
      variant: "text gray",
      size: "small"
    }, /*#__PURE__*/React.createElement(ArrowLeftIcon, null))
  }), children);
};
//# sourceMappingURL=Submenu.js.map