import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from "react";
import cx from "classnames";
import { Slot } from "nano-slots";
import makeStyles from "clever-react/ui/styles/makeStyles";
import useResizeObserver from "./useResizeObserver";
import { useLayout } from "..";
import { modes } from "../LayoutContext";
var getClasses = makeStyles(function (_ref) {
  var spaces = _ref.cleverUI.spaces,
      breakpoints = _ref.breakpoints;
  return {
    header: function header(_ref2) {
      var _ref3;

      var collapse = _ref2.collapse;
      return _ref3 = {
        isolation: "isolate",
        zIndex: 2,
        pointerEvents: "none",
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        padding: collapse ? spaces.lg : "0px"
      }, _defineProperty(_ref3, breakpoints.down("md"), {
        padding: spaces.lg
      }), _defineProperty(_ref3, "position", "sticky"), _defineProperty(_ref3, "top", "0px"), _defineProperty(_ref3, "& > *", {
        pointerEvents: "auto"
      }), _ref3;
    }
  };
});

var Header = function Header(props) {
  var _props$children = props.children,
      children = _props$children === void 0 ? null : _props$children,
      className = props.className;

  var _useResizeObserver = useResizeObserver(),
      headerRef = _useResizeObserver.ref,
      _useResizeObserver$he = _useResizeObserver.height,
      headerHeight = _useResizeObserver$he === void 0 ? 0 : _useResizeObserver$he;

  var _useLayout = useLayout(),
      mode = _useLayout.mode;

  var classes = getClasses({
    headerHeight: headerHeight,
    collapse: modes.popover === mode
  });
  document.documentElement.style.setProperty("--layout-header-height", "".concat(headerHeight, "px"));
  return /*#__PURE__*/React.createElement("header", {
    ref: headerRef,
    className: cx(classes.header, className)
  }, /*#__PURE__*/React.createElement(Slot, {
    name: "Header.left"
  }), children);
};

export default Header;