"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.ScrollBar = 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 _globalObject = require("@skbkontur/global-object");



var _ThemeContext = require("../../lib/theming/ThemeContext");
var _Emotion = require("../../lib/theming/Emotion");
var _isInstanceOf = require("../../lib/isInstanceOf");

var _ScrollContainer = require("./ScrollContainer.constants");
var _ScrollContainer2 = require("./ScrollContainer.styles");
var _ScrollContainer3 = require("./ScrollContainer.helpers");var





































ScrollBar = exports.ScrollBar = /*#__PURE__*/function (_React$Component) {function ScrollBar() {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.

    containerRef = /*#__PURE__*/_react.default.createRef();_this.



    state = (0, _extends2.default)({},
    _ScrollContainer.defaultScrollbarState);_this.





















    renderMain = function () {var _cx, _inlineStyles;
      var state = _this.state;
      var props = _this.props;

      if (!state.active) {
        return null;
      }

      var _scrollSizeParameters = _ScrollContainer.scrollSizeParametersNames[_this.props.axis],customScrollPos = _scrollSizeParameters.customScrollPos,customScrollSize = _scrollSizeParameters.customScrollSize;

      var classNames = (0, _Emotion.cx)(props.className, _ScrollContainer2.styles.scrollBar(_this.theme), _this.scrollBarStyles, (_cx = {}, _cx[
      _ScrollContainer2.styles.scrollBarInvert(_this.theme)] = props.invert, _cx[
      _ScrollContainer2.styles.visibleScrollBar()] = props.isVisible, _cx)
      );

      var inlineStyles = (_inlineStyles = {}, _inlineStyles[
      customScrollPos] = state.pos + "%", _inlineStyles[
      customScrollSize] = state.size + "%", _inlineStyles);


      return /*#__PURE__*/(
        _react.default.createElement("div", { ref: _this.containerRef, className: _this.scrollBarContainerClassNames, style: props.offset }, /*#__PURE__*/
        _react.default.createElement("div", {
          ref: _this.refScroll,
          style: inlineStyles,
          className: classNames,
          onMouseDown: _this.handleScrollMouseDown,
          "data-tid": "ScrollContainer__ScrollBar-" + props.axis }
        )
        ));

    };_this.

    reflow = function () {
      if (!_this.inner) {
        return;
      }

      var props = _this.props;
      var state = _this.state;

      var _getScrollSizeParams = (0, _ScrollContainer3.getScrollSizeParams)(_this.inner, props.axis),scrollSize = _getScrollSizeParams.scrollSize,scrollPos = _getScrollSizeParams.scrollPos,scrollActive = _getScrollSizeParams.scrollActive;

      if (!scrollActive && !state.active) {
        return;
      }

      if (state.active !== scrollActive || state.size !== scrollSize || state.pos !== scrollPos) {
        var scrollState = _this.getImmediateScrollState();

        if (state.pos !== scrollPos) {
          _this.props.onScroll == null || _this.props.onScroll(props.axis, scrollState, state.scrollState);
        }

        _this.setState((0, _extends2.default)({},
        _this.state, {
          active: scrollActive,
          size: scrollSize,
          pos: scrollPos,
          scrollState: scrollState })
        );
      }
    };_this.

    setInnerElement = function (inner) {
      _this.inner = inner;
      _this.reflow();
    };_this.







































    refScroll = function (element) {
      var handleScrollWheel = function handleScrollWheel(event) {return _this.handleScrollWheel(event, _this.props.axis);};

      if (!_this.node && element) {
        element.addEventListener('wheel', handleScrollWheel, { passive: false });
      }
      if (_this.node && !element) {
        _this.node.removeEventListener('wheel', handleScrollWheel);
      }
      _this.node = element;
    };_this.

    handleScrollMouseDown = function (event) {
      if (!_this.inner) {
        return;
      }

      var _scrollSizeParameters2 = _ScrollContainer.scrollSizeParametersNames[_this.props.axis],offset = _scrollSizeParameters2.offset,size = _scrollSizeParameters2.size,pos = _scrollSizeParameters2.pos,coord = _scrollSizeParameters2.coord;

      var initialCoord = event[coord];
      var target = _globalObject.globalObject.document;
      var initialScrollPos = _this.inner[pos];
      var state = _this.state;

      var mouseMove = function mouseMove(mouseMoveEvent) {
        if (!_this.inner || !_this.containerRef.current) {
          return;
        }

        var remainingScrollingContent = _this.inner[size] - _this.inner[offset];
        var remainingScrollingSpace = _this.containerRef.current[offset] / 100 * (100 - state.size);

        var ratio = remainingScrollingContent / remainingScrollingSpace;
        var delta = (mouseMoveEvent[coord] - initialCoord) * ratio;

        _this.inner[pos] = initialScrollPos + delta;

        if (mouseMoveEvent.preventDefault) {
          mouseMoveEvent.preventDefault();
        }

        if (Object.prototype.hasOwnProperty.call(mouseMoveEvent, 'returnValue')) {

          mouseMoveEvent.


          returnValue = false;
        }
      };

      var mouseUp = function mouseUp() {
        target == null || target.removeEventListener('mousemove', mouseMove);
        target == null || target.removeEventListener('mouseup', mouseUp);
        _this.setState((0, _extends2.default)({}, _this.state, { scrollingByMouseDrag: false }));
      };

      target == null || target.addEventListener('mousemove', mouseMove);
      target == null || target.addEventListener('mouseup', mouseUp);
      _this.setState((0, _extends2.default)({}, _this.state, { scrollingByMouseDrag: true }));

      event.preventDefault();
    };_this.

    handleScrollWheel = function (event, axis) {
      if (!_this.inner || !(0, _isInstanceOf.isInstanceOf)(event, _globalObject.globalObject.WheelEvent) || axis === 'x' && !event.shiftKey) {
        return;
      }

      var _scrollSizeParameters3 = _ScrollContainer.scrollSizeParametersNames[axis],offset = _scrollSizeParameters3.offset,size = _scrollSizeParameters3.size,pos = _scrollSizeParameters3.pos;

      var scrollSize = _this.inner[size];
      var scrollPos = _this.inner[pos];
      var offsetHeight = _this.inner[offset];

      if (event.deltaY > 0 && scrollSize <= scrollPos + offsetHeight) {
        return;
      }
      if (event.deltaY < 0 && scrollPos <= 0) {
        return;
      }

      _this.inner[pos] += event.deltaY;

      event.preventDefault();
    };_this.

    getImmediateScrollState = function () {
      var _scrollSizeParameters4 = _ScrollContainer.scrollSizeParametersNames[_this.props.axis],pos = _scrollSizeParameters4.pos,size = _scrollSizeParameters4.size,clientSize = _scrollSizeParameters4.clientSize;

      if (!_this.inner || _this.inner[pos] === 0) {
        return 'begin';
      }
      // Zoom in Chrome causes problems
      // https://github.com/skbkontur/retail-ui/pull/2705#issue-806286945
      var maxScrollPos = _this.inner[size] - _this.inner[clientSize];
      if (Math.abs(maxScrollPos - _this.inner[pos]) <= 1) {
        return 'end';
      }

      return 'middle';
    };return _this;}(0, _inheritsLoose2.default)(ScrollBar, _React$Component);var _proto = ScrollBar.prototype;_proto.componentDidMount = function componentDidMount() {this.reflow();};_proto.componentDidUpdate = function componentDidUpdate() {this.reflow();};_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.setHover = function setHover(hover) {if (this.state.active && this.state.hover !== hover) {this.setState((0, _extends2.default)({}, this.state, { hover: hover }));}};_proto.getHover = function getHover() {return this.state.hover;};return (0, _createClass2.default)(ScrollBar, [{ key: "scrollBarState", get: function get() {return this.state.scrollState;} }, { key: "scrollBarStyles", get: function get() {var _cx3;var state = this.state;if (this.props.axis === 'x') {var _cx2;return (0, _Emotion.cx)(_ScrollContainer2.styles.scrollBarX(this.theme), _ScrollContainer2.globalClasses.scrollbarX, (_cx2 = {}, _cx2[_ScrollContainer2.styles.scrollBarXHover(this.theme)] = state.hover || state.scrollingByMouseDrag, _cx2));}return (0, _Emotion.cx)(_ScrollContainer2.styles.scrollBarY(this.theme), _ScrollContainer2.globalClasses.scrollbarY, (_cx3 = {}, _cx3[_ScrollContainer2.styles.scrollBarYHover(this.theme)] = state.hover || state.scrollingByMouseDrag, _cx3));} }, { key: "scrollBarContainerClassNames", get: function get() {var axis = this.props.axis;if (axis === 'x') {return (0, _Emotion.cx)(_ScrollContainer2.globalClasses.scrollbarContainerX, _ScrollContainer2.styles.scrollBarContainerX(this.theme));}return (0, _Emotion.cx)(_ScrollContainer2.globalClasses.scrollbarContainerY, _ScrollContainer2.styles.scrollBarContainerY());} }]);}(_react.default.Component);