import _extends from "@babel/runtime/helpers/esm/extends";
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
var _class, _SidePageFooter;
import React from 'react';
import * as LayoutEvents from "../../../lib/LayoutEvents";
import { ThemeContext } from "../../../lib/theming/ThemeContext";
import { CommonWrapper } from "../../../internal/CommonWrapper";
import { cx } from "../../../lib/theming/Emotion";
import { responsiveLayout } from "../../ResponsiveLayout/decorator";
import { getRootNode, rootNode } from "../../../lib/rootNode";
import { getDOMRect } from "../../../lib/dom/getDOMRect";
import { Gapped } from "../../Gapped";
import { isNonNullable } from "../../../lib/utils";
import { ModalSeparator } from "../../Modal/ModalSeparator";
import { styles } from "../SidePage.styles";
import { SidePageContext } from "../SidePageContext";
export var SidePageFooterDataTids = {
  root: 'SidePageFooter__root'
};

/**
 * Футер сайдпейджа.
 *
 * @visibleName SidePage.Footer
 */
export var SidePageFooter = responsiveLayout(_class = rootNode(_class = (_SidePageFooter = /*#__PURE__*/function (_React$Component) {
  function SidePageFooter() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.context = _this.context;
    _this.state = {
      fixed: false
    };
    _this.content = null;
    _this.layoutSub = null;
    _this.update = function () {
      _this.setProperStyles();
    };
    _this.refContent = function (node) {
      _this.content = node;
    };
    _this.setProperStyles = function () {
      var wrapper = getRootNode(_this);
      if (wrapper && _this.content) {
        var wrapperRect = getDOMRect(wrapper);
        var contentRect = getDOMRect(_this.content);
        var fixed = wrapperRect.top > contentRect.top;
        _this.setState({
          fixed: fixed
        });
      }
    };
    return _this;
  }
  _inheritsLoose(SidePageFooter, _React$Component);
  var _proto = SidePageFooter.prototype;
  _proto.componentDidMount = function componentDidMount() {
    var _this$context$setHasF, _this$context, _this$context$setHasP, _this$context2;
    this.context.footerRef(this);
    this.update();
    this.layoutSub = LayoutEvents.addListener(this.update);
    (_this$context$setHasF = (_this$context = this.context).setHasFooter) == null || _this$context$setHasF.call(_this$context);
    (_this$context$setHasP = (_this$context2 = this.context).setHasPanel) == null || _this$context$setHasP.call(_this$context2, this.props.panel);
  };
  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    var _this$context$setHasP2, _this$context3;
    this.props.panel !== prevProps.panel && ((_this$context$setHasP2 = (_this$context3 = this.context).setHasPanel) == null ? void 0 : _this$context$setHasP2.call(_this$context3, this.props.panel));
  };
  _proto.componentWillUnmount = function componentWillUnmount() {
    var _this$context$setHasF2, _this$context4, _this$context$setHasP3, _this$context5;
    this.context.footerRef(null);
    if (this.layoutSub) {
      this.layoutSub.remove();
    }
    (_this$context$setHasF2 = (_this$context4 = this.context).setHasFooter) == null || _this$context$setHasF2.call(_this$context4, false);
    (_this$context$setHasP3 = (_this$context5 = this.context).setHasPanel) == null || _this$context$setHasP3.call(_this$context5, false);
  };
  _proto.getSticky = function getSticky() {
    if (typeof this.props.sticky !== 'undefined') {
      return this.props.sticky;
    }
    if (this.isMobileLayout) {
      return false;
    }
    return true;
  };
  _proto.render = function render() {
    var _this2 = this;
    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
      _this2.theme = theme;
      return _this2.renderMain();
    });
  };
  _proto.renderMain = function renderMain() {
    var _this3 = this;
    var separator = (this.props.panel || this.state.fixed) && /*#__PURE__*/React.createElement(ModalSeparator, {
      fixed: this.state.fixed
    });
    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
      rootNodeRef: this.setRootNode
    }, this.props), /*#__PURE__*/React.createElement("div", {
      "data-tid": SidePageFooterDataTids.root,
      style: {
        height: this.getContentHeight()
      },
      className: styles.footerWrapper()
    }, /*#__PURE__*/React.createElement(SidePageContext.Consumer, null, function (_ref) {
      var _cx, _cx2;
      var getWidth = _ref.getWidth;
      return /*#__PURE__*/React.createElement("div", {
        className: cx(styles.footer(_this3.theme), (_cx = {}, _cx[styles.positionStatic()] = !_this3.getSticky(), _cx)),
        style: {
          width: getWidth()
        }
      }, separator, /*#__PURE__*/React.createElement("div", {
        className: cx(styles.footerContent(_this3.theme), (_cx2 = {}, _cx2[styles.footerFixed(_this3.theme)] = _this3.state.fixed, _cx2[styles.panel(_this3.theme)] = !!_this3.props.panel, _cx2[styles.panelFixed(_this3.theme)] = !!_this3.props.panel && _this3.state.fixed, _cx2[styles.mobileFooterContent(_this3.theme)] = _this3.isMobileLayout, _cx2)),
        ref: _this3.refContent
      }, isNonNullable(_this3.props.gap) ? /*#__PURE__*/React.createElement(Gapped, {
        vertical: _this3.isMobileLayout,
        gap: _this3.props.gap
      }, _this3.props.children) : _this3.props.children));
    })));
  };
  _proto.getContentHeight = function getContentHeight() {
    if (!this.content) {
      return 'auto';
    }
    return getDOMRect(this.content).height;
  };
  return SidePageFooter;
}(React.Component), _SidePageFooter.__KONTUR_REACT_UI__ = 'SidePageFooter', _SidePageFooter.displayName = 'SidePageFooter', _SidePageFooter.contextType = SidePageContext, _SidePageFooter)) || _class) || _class;