import React, { useContext, useLayoutEffect } from 'react';
import { getScrollWidth } from "../../../lib/dom/getScrollWidth";
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 { Gapped } from "../../Gapped";
import { isNonNullable } from "../../../lib/utils";
import { isThemeGTE } from "../../../lib/theming/ThemeHelpers";
import { styles } from "../Modal.styles";
import { ModalContext } from "../ModalContext";
import { ModalSeparator } from "../ModalSeparator";
export var ModalFooterDataTids = {
  root: 'ModalFooter__root'
};

/**
 * Футер модального окна, где обычно располагаются кнопки основных действий.
 *
 * @visibleName Modal.Footer
 */
function ModalFooter(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,
    gap = props.gap,
    panel = props.panel,
    children = props.children;
  useLayoutEffect(function () {
    modal.setHasFooter == null || modal.setHasFooter(true);
    modal.setHasPanel == null || modal.setHasPanel(panel || false);
    return function () {
      modal.setHasFooter == null || modal.setHasFooter(false);
      modal.setHasPanel == null || modal.setHasPanel(false);
    };
  }, [panel]);
  var versionGTE5_2 = isThemeGTE(theme, '5.2');
  var renderContent = function renderContent(fixed) {
    if (fixed === void 0) {
      fixed = false;
    }
    return /*#__PURE__*/(
      React.createElement("div", null, (panel || fixed) && /*#__PURE__*/React.createElement(ModalSeparator, {
        fixed: fixed
      }), /*#__PURE__*/
      React.createElement("div", {
        "data-tid": ModalFooterDataTids.root,
        className: cx(styles.footer(theme), fixed && styles.fixedFooter(theme), versionGTE5_2 && fixed && styles.fixedFooter5_2(), Boolean(panel) && styles.panel(theme), fixed && Boolean(panel) && styles.fixedPanel(theme), layout.isMobile && styles.mobileFooter(theme), versionGTE5_2 && layout.isMobile && fixed && styles.mobileFixedFooter5_2(theme))
      }, isNonNullable(gap) ? /*#__PURE__*/
      React.createElement(Gapped, {
        vertical: layout.isMobile,
        gap: gap
      }, children) : children))
    );
  };
  var getStickyOffset = function getStickyOffset() {
    var offset = 0;
    if (modal.horizontalScroll) {
      offset += getScrollWidth();
    }
    if (versionGTE5_2 && layout.isMobile && !modal.mobileOnFullScreen) {
      offset += parseInt(theme.mobileModalContainerMarginBottom);
    }
    return offset;
  };
  return /*#__PURE__*/(
    React.createElement(CommonWrapper, props, sticky ? /*#__PURE__*/
    React.createElement(Sticky, {
      side: "bottom",
      offset: getStickyOffset()
    }, renderContent) : renderContent())
  );
}
ModalFooter.__KONTUR_REACT_UI__ = 'ModalFooter';
ModalFooter.displayName = 'ModalFooter';
ModalFooter.__MODAL_FOOTER__ = true;
export { ModalFooter };