import _extends from "@babel/runtime/helpers/esm/extends";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
import React from 'react';
import { globalObject } from '@skbkontur/global-object';
import { ThemeContext } from "../../../lib/theming/ThemeContext";
import { cx } from "../../../lib/theming/Emotion";
import { isInstanceOf } from "../../../lib/isInstanceOf";
import { defaultScrollbarState, scrollSizeParametersNames } from "../ScrollContainer.constants";
import { styles, globalClasses } from "../ScrollContainer.styles";
import { getScrollSizeParams } from "../ScrollContainer.helpers";
export var 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.createRef();
    _this.state = _extends({}, defaultScrollbarState);
    _this.renderMain = function () {
      var _cx, _inlineStyles;
      var state = _this.state;
      var props = _this.props;
      if (!state.active) {
        return null;
      }
      var _scrollSizeParameters = scrollSizeParametersNames[_this.props.axis],
        customScrollPos = _scrollSizeParameters.customScrollPos,
        customScrollSize = _scrollSizeParameters.customScrollSize;
      var classNames = cx(props.className, styles.scrollBar(_this.theme), _this.scrollBarStyles, (_cx = {}, _cx[styles.scrollBarInvert(_this.theme)] = props.invert, _cx[styles.visibleScrollBar()] = props.isVisible, _cx));
      var inlineStyles = (_inlineStyles = {}, _inlineStyles[customScrollPos] = state.pos + "%", _inlineStyles[customScrollSize] = state.size + "%", _inlineStyles);
      return /*#__PURE__*/(
        React.createElement("div", {
          ref: _this.containerRef,
          className: _this.scrollBarContainerClassNames,
          style: props.offset
        }, /*#__PURE__*/
        React.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 = 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(_extends({}, _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 = scrollSizeParametersNames[_this.props.axis],
        offset = _scrollSizeParameters2.offset,
        size = _scrollSizeParameters2.size,
        pos = _scrollSizeParameters2.pos,
        coord = _scrollSizeParameters2.coord;
      var initialCoord = event[coord];
      var target = 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(_extends({}, _this.state, {
          scrollingByMouseDrag: false
        }));
      };
      target == null || target.addEventListener('mousemove', mouseMove);
      target == null || target.addEventListener('mouseup', mouseUp);
      _this.setState(_extends({}, _this.state, {
        scrollingByMouseDrag: true
      }));
      event.preventDefault();
    };
    _this.handleScrollWheel = function (event, axis) {
      if (!_this.inner || !isInstanceOf(event, globalObject.WheelEvent) || axis === 'x' && !event.shiftKey) {
        return;
      }
      var _scrollSizeParameters3 = 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 = 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;
  }
  _inheritsLoose(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.createElement(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(_extends({}, this.state, {
        hover: hover
      }));
    }
  };
  _proto.getHover = function getHover() {
    return this.state.hover;
  };
  return _createClass(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 cx(styles.scrollBarX(this.theme), globalClasses.scrollbarX, (_cx2 = {}, _cx2[styles.scrollBarXHover(this.theme)] = state.hover || state.scrollingByMouseDrag, _cx2));
      }
      return cx(styles.scrollBarY(this.theme), globalClasses.scrollbarY, (_cx3 = {}, _cx3[styles.scrollBarYHover(this.theme)] = state.hover || state.scrollingByMouseDrag, _cx3));
    }
  }, {
    key: "scrollBarContainerClassNames",
    get: function get() {
      var axis = this.props.axis;
      if (axis === 'x') {
        return cx(globalClasses.scrollbarContainerX, styles.scrollBarContainerX(this.theme));
      }
      return cx(globalClasses.scrollbarContainerY, styles.scrollBarContainerY());
    }
  }]);
}(React.Component);