'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _extends = require('@babel/runtime/helpers/extends');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var React = require('react');
var classNames = require('clsx');
var useForwardRef = require('@prom-ui/core/useForwardRef');
var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var Button = require('@prom-ui/core/Button');
var Icon = require('@prom-ui/core/Icon');
var BodyProvider = require('@prom-ui/core/BodyProvider');
var Left = require('@prom-ui/icons/Left');
var Right = require('@prom-ui/icons/Right');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

function _interopNamespaceCompat(e) {
    if (e && typeof e === 'object' && 'default' in e) return e;
    var n = Object.create(null);
    if (e) {
        Object.keys(e).forEach(function (k) {
            if (k !== 'default') {
                var d = Object.getOwnPropertyDescriptor(e, k);
                Object.defineProperty(n, k, d.get ? d : {
                    enumerable: true,
                    get: function () { return e[k]; }
                });
            }
        });
    }
    n.default = e;
    return Object.freeze(n);
}

var _extends__default = /*#__PURE__*/_interopDefaultCompat(_extends);
var _defineProperty__default = /*#__PURE__*/_interopDefaultCompat(_defineProperty);
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultCompat(_objectWithoutProperties);
var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultCompat(_taggedTemplateLiteral);
var _slicedToArray__default = /*#__PURE__*/_interopDefaultCompat(_slicedToArray);

var css = {"root":"ScrollControls__root___5xFyd","buttonHolderCommon":"ScrollControls__buttonHolderCommon___1fL6b","buttonHolderPrev":"ScrollControls__buttonHolderPrev___PY-Co ScrollControls__buttonHolderCommon___1fL6b","buttonHolderNext":"ScrollControls__buttonHolderNext___u2XoF ScrollControls__buttonHolderCommon___1fL6b","buttonHolderDisabled":"ScrollControls__buttonHolderDisabled___AZbdb","buttonHideDisabled":"ScrollControls__buttonHideDisabled___zw-fa","icon":"ScrollControls__icon___z7X7-","showOnHover":"ScrollControls__showOnHover___PVtmJ"};

var _templateObject, _templateObject2;
var DIRECTION_NEXT = 1;
var DIRECTION_PREV = -1;
var CONTROLS_UPDATE_DELAY = 100;
var ScrollControlsButton = function ScrollControlsButton(_ref) {
  var scrollRef = _ref.scrollRef,
    _ref$hideOnDisabled = _ref.hideOnDisabled,
    hideOnDisabled = _ref$hideOnDisabled === void 0 ? false : _ref$hideOnDisabled,
    _ref$isActive = _ref.isActive,
    isActive = _ref$isActive === void 0 ? true : _ref$isActive,
    onClickNext = _ref.onClickNext,
    onClickPrev = _ref.onClickPrev,
    zIndex = _ref.zIndex,
    children = _ref.children;
  var _useBodyStoreTTag = BodyProvider.useBodyStoreTTag(),
    t = _useBodyStoreTTag.t;
  var updateControlsTimer = React.useRef(null);
  var _useState = React.useState({
      prev: false,
      next: false
    }),
    _useState2 = _slicedToArray__default.default(_useState, 2),
    controlsVisible = _useState2[0],
    setControlsVisible = _useState2[1];
  var updateControlsVisible = function updateControlsVisible(nextScrollLeft) {
    if (!scrollRef.current) return;
    var _scrollRef$current = scrollRef.current,
      scrollLeft = _scrollRef$current.scrollLeft,
      scrollWidth = _scrollRef$current.scrollWidth,
      clientWidth = _scrollRef$current.clientWidth;
    var currentScrollLeft = (Number.isInteger(nextScrollLeft) ? nextScrollLeft : scrollLeft) || 0;
    setControlsVisible({
      prev: currentScrollLeft > 1,
      next: currentScrollLeft < scrollWidth - clientWidth - 1 // -1 hack detected in PhotoGallery
    });
  };
  var updateScrollLeft = function updateScrollLeft(direction) {
    if (!scrollRef.current) return;
    var _scrollRef$current2 = scrollRef.current,
      scrollLeft = _scrollRef$current2.scrollLeft,
      clientWidth = _scrollRef$current2.clientWidth;
    var offset = clientWidth * direction;
    requestAnimationFrame(function () {
      var nextScrollLeft = scrollLeft + offset;
      updateControlsVisible(nextScrollLeft);
      if (scrollRef.current) {
        scrollRef.current.scrollTo({
          left: nextScrollLeft,
          behavior: 'smooth'
        });
      }
    });
  };
  var handleOnClickPrev = function handleOnClickPrev(e) {
    if (typeof onClickPrev === 'function') {
      onClickPrev(e);
    }
    updateScrollLeft(DIRECTION_PREV);
  };
  var handleOnClickNext = function handleOnClickNext(e) {
    if (typeof onClickNext === 'function') {
      onClickNext(e);
    }
    updateScrollLeft(DIRECTION_NEXT);
  };
  var handleOnScroll = function handleOnScroll() {
    clearTimeout(updateControlsTimer.current || 0);
    updateControlsTimer.current = setTimeout(updateControlsVisible, CONTROLS_UPDATE_DELAY);
  };
  React.useEffect(function () {
    if (scrollRef.current && isActive) {
      requestAnimationFrame(function () {
        updateControlsVisible();
      });
      scrollRef.current.addEventListener('scroll', handleOnScroll);
    }
    return function () {
      if (scrollRef.current && isActive) {
        scrollRef.current.removeEventListener('scroll', handleOnScroll);
      }
    };
  }, [isActive, children]);
  if (isActive && (controlsVisible.prev || controlsVisible.next)) {
    return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement("div", {
      className: classNames__default.default(css.buttonHolderPrev, _defineProperty__default.default({}, css.buttonHolderDisabled, !controlsVisible.prev)),
      style: {
        zIndex: zIndex
      }
    }, /*#__PURE__*/React__namespace.default.createElement(Button.Button, {
      "button-theme": "white",
      "button-padding": "none",
      "button-round": "full",
      "button-width": "1-1",
      "button-height": "1-1",
      "button-blackhole": "scroll-button",
      type: "button",
      className: hideOnDisabled ? css.buttonHideDisabled : undefined,
      onClick: handleOnClickPrev,
      disabled: !controlsVisible.prev,
      title: t(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\u041D\u0430\u0437\u0430\u0434"])))
    }, /*#__PURE__*/React__namespace.default.createElement(Icon.Icon, {
      className: css.icon,
      "icon-events": "none",
      "icon-as": Left.SvgLeft
    }))), /*#__PURE__*/React__namespace.default.createElement("div", {
      className: classNames__default.default(css.buttonHolderNext, _defineProperty__default.default({}, css.buttonHolderDisabled, !controlsVisible.next)),
      style: {
        zIndex: zIndex
      }
    }, /*#__PURE__*/React__namespace.default.createElement(Button.Button, {
      "button-theme": "white",
      "button-padding": "none",
      "button-round": "full",
      "button-width": "1-1",
      "button-height": "1-1",
      "button-blackhole": "scroll-button",
      type: "button",
      className: hideOnDisabled ? css.buttonHideDisabled : undefined,
      onClick: handleOnClickNext,
      disabled: !controlsVisible.next,
      title: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\u0414\u0430\u043B\u0435\u0435"])))
    }, /*#__PURE__*/React__namespace.default.createElement(Icon.Icon, {
      className: css.icon,
      "icon-events": "none",
      "icon-as": Right.SvgRight
    }))));
  }
  return null;
};
ScrollControlsButton.displayName = 'ScrollControlsButton';

var _excluded = ["children", "className", "hideOnDisabled", "isActive", "onClickNext", "onClickPrev", "showOnHover", "zIndex"];
var ScrollControls = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
  var children = _ref.children,
    className = _ref.className,
    _ref$hideOnDisabled = _ref.hideOnDisabled,
    hideOnDisabled = _ref$hideOnDisabled === void 0 ? true : _ref$hideOnDisabled,
    _ref$isActive = _ref.isActive,
    isActive = _ref$isActive === void 0 ? true : _ref$isActive,
    onClickNext = _ref.onClickNext,
    onClickPrev = _ref.onClickPrev,
    _ref$showOnHover = _ref.showOnHover,
    showOnHover = _ref$showOnHover === void 0 ? false : _ref$showOnHover,
    zIndex = _ref.zIndex,
    props = _objectWithoutProperties__default.default(_ref, _excluded);
  var scrollRef = useForwardRef.useForwardRef(ref, null);
  return /*#__PURE__*/React__namespace.createElement("div", _extends__default.default({
    className: classNames__default.default(css.root, className, _defineProperty__default.default({}, css.showOnHover, showOnHover))
  }, props), /*#__PURE__*/React__namespace.cloneElement(children, {
    ref: scrollRef
  }), /*#__PURE__*/React__namespace.createElement(ScrollControlsButton, {
    scrollRef: scrollRef,
    hideOnDisabled: hideOnDisabled,
    isActive: isActive,
    onClickNext: onClickNext,
    onClickPrev: onClickPrev,
    zIndex: zIndex
  }, children));
});
ScrollControls.displayName = 'ScrollControls';

exports.ScrollControls = ScrollControls;

require('./style.development.v2.css');
