"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.SidePageHeaderDataTids = exports.SidePageHeader = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
var _lodash = _interopRequireDefault(require("lodash.throttle"));

var _Sticky = require("../Sticky");
var _utils = require("../../lib/utils");
var _ThemeContext = require("../../lib/theming/ThemeContext");


var _CommonWrapper = require("../../internal/CommonWrapper");
var _Emotion = require("../../lib/theming/Emotion");
var _decorator = require("../ResponsiveLayout/decorator");

var _rootNode = require("../../lib/rootNode");
var _getDOMRect = require("../../lib/dom/getDOMRect");
var _ModalSeparator = require("../Modal/ModalSeparator");
var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");

var _featureFlagsContext = require("../../lib/featureFlagsContext");

var _SidePage = require("./SidePage.styles");

var _SidePageContext = require("./SidePageContext");
var _SidePageCloseButton = require("./SidePageCloseButton");var _class, _SidePageHeader;





















var SidePageHeaderDataTids = exports.SidePageHeaderDataTids = {
  root: 'SidePageHeader__root',
  close: 'SidePage__close'
};

/**
 * Шапка сайдпейджа
 *
 * @visibleName SidePage.Header
 */var


SidePageHeader = exports.SidePageHeader = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class = (_SidePageHeader = /*#__PURE__*/function (_React$Component) {function SidePageHeader() {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 = {
      isNativeStuck: true,
      isReadyToStuck: false
    };_this.






    wrapper = null;_this.
    sticky = null;_this.
    lastRegularHeight = 0;_this.



















    componentDidMount = function () {var _getRootNode;
      (_getRootNode = (0, _rootNode.getRootNode)(_this)) == null || (_getRootNode = _getRootNode.parentNode) == null || _getRootNode.addEventListener == null || _getRootNode.addEventListener('scroll', _this.throttleHandleScroll, true);
      _this.context.setHasHeader == null || _this.context.setHasHeader();
      _this.context.headerRef(_this);
    };_this.

    componentWillUnmount = function () {var _getRootNode2;
      (_getRootNode2 = (0, _rootNode.getRootNode)(_this)) == null || (_getRootNode2 = _getRootNode2.parentNode) == null || _getRootNode2.removeEventListener == null || _getRootNode2.removeEventListener('scroll', _this.throttleHandleScroll, true);
      _this.context.setHasHeader == null || _this.context.setHasHeader(false);
      _this.context.headerRef(null);
    };_this.

    throttleHandleScroll = (0, _lodash.default)(function (event) {
      var target = event.currentTarget;
      if (target && typeof target.scrollTop === 'number') {
        _this.setState({ isNativeStuck: target.scrollTop === 0 });
      }
      _this.update();
    }, 5);_this.

    update = function () {var _this$sticky;
      (_this$sticky = _this.sticky) == null || _this$sticky.reflow();
      if (!_this.featureFlags.sidePageDisableHeaderShrink) {
        _this.updateReadyToStuck();
      }
    };_this.


































































    renderHeader = function (fixed) {var _cx, _this$props$cutTitleO, _cx2;if (fixed === void 0) {fixed = false;}
      var isDisplayed = _this.props.hasSeparator || fixed;
      return /*#__PURE__*/(
        _react.default.createElement("div", null, /*#__PURE__*/
        _react.default.createElement("div", {
          className: (0, _Emotion.cx)(_SidePage.styles.header(_this.theme), (_cx = {}, _cx[
          _SidePage.styles.headerFixed(_this.theme)] = fixed, _cx[
          _SidePage.styles.headerShrink(_this.theme)] = fixed && !_this.featureFlags.sidePageDisableHeaderShrink, _cx[
          _SidePage.styles.mobileHeader(_this.theme)] = _this.isMobileLayout, _cx)
          ) },

        _this.renderClose(fixed), /*#__PURE__*/
        _react.default.createElement("div", {
          className: (0, _Emotion.cx)(_SidePage.styles.title(_this.theme), (_cx2 = {}, _cx2[
          _SidePage.styles.title5_1(_this.theme)] = (0, _ThemeHelpers.isThemeGTE)(_this.theme, '5.1'), _cx2[
          _SidePage.styles.mobileTitle(_this.theme)] = _this.isMobileLayout, _cx2[
          _SidePage.styles.titleCut()] =
          fixed && ((_this$props$cutTitleO = _this.props.cutTitleOnStuck) != null ? _this$props$cutTitleO : !_this.featureFlags.sidePageNotCutTitleOnStuckByDefault), _cx2)
          ) },

        (0, _utils.isFunction)(_this.props.children) ? _this.props.children(fixed) : _this.props.children
        )
        ),
        isDisplayed && /*#__PURE__*/_react.default.createElement(_ModalSeparator.ModalSeparator, { fixed: fixed })
        ));

    };_this.

    renderClose = function (fixed) {var _cx3;
      var stickyOffset = parseInt(_this.theme.sidePageHeaderStickyOffset);
      var versionGTE5_1 = (0, _ThemeHelpers.isThemeGTE)(_this.theme, '5.1');
      return /*#__PURE__*/(
        _react.default.createElement("div", {
          className: (0, _Emotion.cx)(_SidePage.styles.wrapperClose(_this.theme), (_cx3 = {}, _cx3[
          _SidePage.styles.wrapperClose5_1(_this.theme)] = versionGTE5_1, _cx3[
          _SidePage.styles.wrapperCloseFixed(_this.theme)] = fixed && !_this.featureFlags.sidePageDisableHeaderShrink, _cx3[
          _SidePage.styles.wrapperCloseFixed5_1(_this.theme)] =
          fixed && versionGTE5_1 && !_this.featureFlags.sidePageDisableHeaderShrink, _cx3[
          _SidePage.styles.mobileWrapperClose(_this.theme)] = _this.isMobileLayout, _cx3[
          _SidePage.styles.mobileWrapperClose5_1(_this.theme)] = _this.isMobileLayout && versionGTE5_1, _cx3)
          ) },

        !(_this.isMobileLayout || _this.featureFlags.sidePageDisableHeaderShrink) ? /*#__PURE__*/
        _react.default.createElement(_Sticky.Sticky, { side: "top", offset: stickyOffset }, /*#__PURE__*/
        _react.default.createElement(_SidePageCloseButton.SidePageCloseButton, { isHeaderFixed: fixed })
        ) : /*#__PURE__*/

        _react.default.createElement(_SidePageCloseButton.SidePageCloseButton, { isHeaderFixed: fixed, isMobile: _this.isMobileLayout })

        ));

    };_this.

    updateReadyToStuck = function () {
      if (_this.wrapper) {
        var wrapperScrolledUp = (0, _getDOMRect.getDOMRect)(_this.wrapper).top;
        var isReadyToStuck = _this.regularHeight + wrapperScrolledUp <= _this.fixedHeaderHeight;
        _this.setState(function (state) {return state.isReadyToStuck !== isReadyToStuck ? (0, _extends2.default)({}, state, { isReadyToStuck: isReadyToStuck }) : state;});
      }
    };_this.

    wrapperRef = function (el) {
      _this.wrapper = el;
    };_this.

    stickyRef = function (el) {
      _this.sticky = el;
    };return _this;}(0, _inheritsLoose2.default)(SidePageHeader, _React$Component);var _proto = SidePageHeader.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.getStickyProp = function getStickyProp() {if (typeof this.props.sticky !== 'undefined') {return this.props.sticky;}if (this.isMobileLayout) {return false;}return true;};_proto.renderMain = function renderMain() {var _this3 = this;var isReadyToStuck = this.state.isReadyToStuck;var isStickyDesktop = !this.isMobileLayout && this.getStickyProp();var isStickyMobile = this.isMobileLayout && this.getStickyProp();var header = this.renderHeader;return /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {var _cx4;_this3.featureFlags = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags);if (!_this3.featureFlags.sidePageDisableHeaderShrink) {isStickyDesktop = isStickyDesktop && isReadyToStuck;}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this3.setRootNode }, _this3.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": SidePageHeaderDataTids.root, ref: _this3.wrapperRef, className: (0, _Emotion.cx)(_SidePage.styles.headerWrapper(), (_cx4 = {}, _cx4[_SidePage.styles.headerNativeStuck(_this3.theme)] = _this3.state.isNativeStuck, _cx4)) }, /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Provider, { value: { stickyReduceLayoutEvents: true } }, !_this3.state.isNativeStuck && (isStickyDesktop || isStickyMobile) ? /*#__PURE__*/_react.default.createElement(_Sticky.Sticky, { ref: _this3.stickyRef, side: "top" }, header) : header())));});};return (0, _createClass2.default)(SidePageHeader, [{ key: "regularHeight", get: function get() {var isReadyToStuck = this.state.isReadyToStuck;if (!this.wrapper) {return 0;}if (!isReadyToStuck) {this.lastRegularHeight = (0, _getDOMRect.getDOMRect)(this.wrapper).height;}return this.lastRegularHeight;} }, { key: "fixedHeaderHeight", get: function get() {var theme = this.theme;return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;} }]);}(_react.default.Component), _SidePageHeader.__KONTUR_REACT_UI__ = 'SidePageHeader', _SidePageHeader.displayName = 'SidePageHeader', _SidePageHeader.contextType = _SidePageContext.SidePageContext, _SidePageHeader.defaultProps = { hasSeparator: false }, _SidePageHeader)) || _class) || _class;