import _extends from "@babel/runtime/helpers/esm/extends";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
var _class, _SidePageHeader;
import React from 'react';
import throttle from 'lodash.throttle';
import { Sticky } from "../../Sticky";
import { isFunction } from "../../../lib/utils";
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 { ModalSeparator } from "../../Modal/ModalSeparator";
import { isThemeGTE } from "../../../lib/theming/ThemeHelpers";
import { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from "../../../lib/featureFlagsContext";
import { styles } from "../SidePage.styles";
import { SidePageContext } from "../SidePageContext";
import { SidePageCloseButton } from "../SidePageCloseButton";
export var SidePageHeaderDataTids = {
  root: 'SidePageHeader__root',
  close: 'SidePage__close'
};

/**
 * Шапка сайдпейджа
 *
 * @visibleName SidePage.Header
 */
export var SidePageHeader = responsiveLayout(_class = 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 = 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 = 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 = throttle(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.createElement("div", null, /*#__PURE__*/
        React.createElement("div", {
          className: cx(styles.header(_this.theme), (_cx = {}, _cx[styles.headerFixed(_this.theme)] = fixed, _cx[styles.headerShrink(_this.theme)] = fixed && !_this.featureFlags.sidePageDisableHeaderShrink, _cx[styles.mobileHeader(_this.theme)] = _this.isMobileLayout, _cx))
        }, _this.renderClose(fixed), /*#__PURE__*/
        React.createElement("div", {
          className: cx(styles.title(_this.theme), (_cx2 = {}, _cx2[styles.title5_1(_this.theme)] = isThemeGTE(_this.theme, '5.1'), _cx2[styles.mobileTitle(_this.theme)] = _this.isMobileLayout, _cx2[styles.titleCut()] = fixed && ((_this$props$cutTitleO = _this.props.cutTitleOnStuck) != null ? _this$props$cutTitleO : !_this.featureFlags.sidePageNotCutTitleOnStuckByDefault), _cx2))
        }, isFunction(_this.props.children) ? _this.props.children(fixed) : _this.props.children)), isDisplayed && /*#__PURE__*/React.createElement(ModalSeparator, {
          fixed: fixed
        }))
      );
    };
    _this.renderClose = function (fixed) {
      var _cx3;
      var stickyOffset = parseInt(_this.theme.sidePageHeaderStickyOffset);
      var versionGTE5_1 = isThemeGTE(_this.theme, '5.1');
      return /*#__PURE__*/(
        React.createElement("div", {
          className: cx(styles.wrapperClose(_this.theme), (_cx3 = {}, _cx3[styles.wrapperClose5_1(_this.theme)] = versionGTE5_1, _cx3[styles.wrapperCloseFixed(_this.theme)] = fixed && !_this.featureFlags.sidePageDisableHeaderShrink, _cx3[styles.wrapperCloseFixed5_1(_this.theme)] = fixed && versionGTE5_1 && !_this.featureFlags.sidePageDisableHeaderShrink, _cx3[styles.mobileWrapperClose(_this.theme)] = _this.isMobileLayout, _cx3[styles.mobileWrapperClose5_1(_this.theme)] = _this.isMobileLayout && versionGTE5_1, _cx3))
        }, !(_this.isMobileLayout || _this.featureFlags.sidePageDisableHeaderShrink) ? /*#__PURE__*/
        React.createElement(Sticky, {
          side: "top",
          offset: stickyOffset
        }, /*#__PURE__*/
        React.createElement(SidePageCloseButton, {
          isHeaderFixed: fixed
        })) : /*#__PURE__*/

        React.createElement(SidePageCloseButton, {
          isHeaderFixed: fixed,
          isMobile: _this.isMobileLayout
        }))
      );
    };
    _this.updateReadyToStuck = function () {
      if (_this.wrapper) {
        var wrapperScrolledUp = getDOMRect(_this.wrapper).top;
        var isReadyToStuck = _this.regularHeight + wrapperScrolledUp <= _this.fixedHeaderHeight;
        _this.setState(function (state) {
          return state.isReadyToStuck !== isReadyToStuck ? _extends({}, state, {
            isReadyToStuck: isReadyToStuck
          }) : state;
        });
      }
    };
    _this.wrapperRef = function (el) {
      _this.wrapper = el;
    };
    _this.stickyRef = function (el) {
      _this.sticky = el;
    };
    return _this;
  }
  _inheritsLoose(SidePageHeader, _React$Component);
  var _proto = SidePageHeader.prototype;
  _proto.render = function render() {
    var _this2 = this;
    return /*#__PURE__*/React.createElement(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.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
      var _cx4;
      _this3.featureFlags = getFullReactUIFlagsContext(flags);
      if (!_this3.featureFlags.sidePageDisableHeaderShrink) {
        isStickyDesktop = isStickyDesktop && isReadyToStuck;
      }
      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
        rootNodeRef: _this3.setRootNode
      }, _this3.props), /*#__PURE__*/React.createElement("div", {
        "data-tid": SidePageHeaderDataTids.root,
        ref: _this3.wrapperRef,
        className: cx(styles.headerWrapper(), (_cx4 = {}, _cx4[styles.headerNativeStuck(_this3.theme)] = _this3.state.isNativeStuck, _cx4))
      }, /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Provider, {
        value: {
          stickyReduceLayoutEvents: true
        }
      }, !_this3.state.isNativeStuck && (isStickyDesktop || isStickyMobile) ? /*#__PURE__*/React.createElement(Sticky, {
        ref: _this3.stickyRef,
        side: "top"
      }, header) : header())));
    });
  };
  return _createClass(SidePageHeader, [{
    key: "regularHeight",
    get: function get() {
      var isReadyToStuck = this.state.isReadyToStuck;
      if (!this.wrapper) {
        return 0;
      }
      if (!isReadyToStuck) {
        this.lastRegularHeight = 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.Component), _SidePageHeader.__KONTUR_REACT_UI__ = 'SidePageHeader', _SidePageHeader.displayName = 'SidePageHeader', _SidePageHeader.contextType = SidePageContext, _SidePageHeader.defaultProps = {
  hasSeparator: false
}, _SidePageHeader)) || _class) || _class;