import React, { useContext, useLayoutEffect } from 'react';
import { Sticky } from "../../Sticky";
import { ThemeContext } from "../../../lib/theming/ThemeContext";
import { CommonWrapper } from "../../../internal/CommonWrapper";
import { cx } from "../../../lib/theming/Emotion";
import { useResponsiveLayout } from "../../ResponsiveLayout";
import { isThemeGTE } from "../../../lib/theming/ThemeHelpers";
import { styles } from "../Modal.styles";
import { ModalClose } from "../ModalClose";
import { ModalContext } from "../ModalContext";
import { ModalSeparator } from "../ModalSeparator";
export var ModalHeaderDataTids = {
  root: 'ModalHeader__root'
};

/**
 * Шапка модального окна, состоит из заголовка и крестика закрытия.
 *
 * @visibleName Modal.Header
 */
function ModalHeader(props) {
  var theme = useContext(ThemeContext);
  var modal = useContext(ModalContext);
  var layout = useResponsiveLayout();
  var _props$sticky = props.sticky,
    sticky = _props$sticky === void 0 ? !layout.isMobile : _props$sticky,
    _props$cutTitleOnStuc = props.cutTitleOnStuck,
    cutTitleOnStuck = _props$cutTitleOnStuc === void 0 ? false : _props$cutTitleOnStuc,
    children = props.children;
  useLayoutEffect(function () {
    modal.setHasHeader == null || modal.setHasHeader(true);
    return function () {
      return modal.setHasHeader == null ? void 0 : modal.setHasHeader(false);
    };
  }, []);
  var versionGTE5_2 = isThemeGTE(theme, '5.2');
  var renderContent = function renderContent(fixed) {
    if (fixed === void 0) {
      fixed = false;
    }
    return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement("div", {
        "data-tid": ModalHeaderDataTids.root,
        className: cx(styles.header(theme), versionGTE5_2 && styles.header5_2(theme), layout.isMobile && styles.mobileHeader(theme), Boolean(modal.additionalPadding) && styles.headerAddPadding(theme), fixed && styles.fixedHeader(theme), cutTitleOnStuck && fixed && styles.titleCut(), versionGTE5_2 && fixed && styles.fixedHeader5_2(), fixed && layout.isMobile && styles.mobileFixedHeader(theme), versionGTE5_2 && fixed && layout.isMobile && styles.mobileFixedHeader5_2(theme), Boolean(modal.close) && styles.headerWithClose(theme), Boolean(modal.close) && layout.isMobile && styles.mobileHeaderWithClose(theme))
      }, modal.close && /*#__PURE__*/
      React.createElement(ModalClose, {
        requestClose: modal.close.requestClose,
        disableClose: modal.close.disableClose
      }), children), fixed && /*#__PURE__*/React.createElement(ModalSeparator, {
        fixed: fixed
      }))
    );
  };
  var getStickyOffset = function getStickyOffset() {
    if (versionGTE5_2 && layout.isMobile && !modal.mobileOnFullScreen) {
      return parseInt(theme.mobileModalContainerMarginTop);
    }
    return 0;
  };
  return /*#__PURE__*/(
    React.createElement(CommonWrapper, props, sticky ? /*#__PURE__*/
    React.createElement(Sticky, {
      offset: getStickyOffset(),
      side: "top"
    }, renderContent) : renderContent())
  );
}
ModalHeader.__KONTUR_REACT_UI__ = 'ModalHeader';
ModalHeader.displayName = 'ModalHeader';
ModalHeader.__MODAL_HEADER__ = true;
export { ModalHeader };