'use strict';

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

var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var cls = require('classnames');
var Carousel_tokens = require('../../Carousel.tokens.js');
var index = require('./utils/index.js');
var Dots_styles = require('./Dots.styles.js');
var useDidMountLayoutEffect = require('../../../../../hooks/useDidMountLayoutEffect.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var cls__default = /*#__PURE__*/_interopDefault(cls);

var SIZE = 16; // размер точки в px
var ANIMATION_DURATION = 0.3; // скорость анимации в секундах

var Dots = /*#__PURE__*/React.memo(function (_ref) {
  var _ref$index = _ref.index,
    originalIndex = _ref$index === void 0 ? 0 : _ref$index,
    onChange = _ref.onChange,
    _ref$centered = _ref.centered,
    centered = _ref$centered === void 0 ? false : _ref$centered,
    _ref$count = _ref.count,
    count = _ref$count === void 0 ? 0 : _ref$count,
    _ref$visibleCount = _ref.visibleCount,
    originalVisibleCount = _ref$visibleCount === void 0 ? 0 : _ref$visibleCount;
  // Трансформируем входные параметры для корректной работы в дальнейшем
  var _getInitialData = index.getInitialData(originalIndex, count, originalVisibleCount),
    _getInitialData2 = _rollupPluginBabelHelpers.slicedToArray(_getInitialData, 2),
    index$1 = _getInitialData2[0],
    visibleCount = _getInitialData2[1];

  // Рефки на DOM-ноды
  var transitionWrapperRef = React.useRef(null);
  var dotWrapperRef = React.useRef(null);
  var leftAnimationWrapperRef = React.useRef(null);
  var rightAnimationWrapperRef = React.useRef(null);

  // Консистентные переменные
  var isAnimating = React.useRef(false);
  var prevIndex = React.useRef(-Infinity);
  var prevActiveIndex = React.useRef(Infinity);
  var isRightDirection = index$1 > prevIndex.current;
  var diffDotsRange = Math.abs(index$1 - prevIndex.current);
  var activeIndex = index.getActiveIndex(index$1, isRightDirection, count, visibleCount);
  var hiddenDotsLeft = activeIndex < index$1;
  var hiddenDotsRight = index$1 + (visibleCount - 1 - activeIndex) < count - 1;
  var syncDotsState = function syncDotsState() {
    var _dotWrapperRef$curren;
    if (!dotWrapperRef.current || !transitionWrapperRef.current || !leftAnimationWrapperRef.current || !rightAnimationWrapperRef.current) {
      return;
    }
    dotWrapperRef.current.classList.remove(Carousel_tokens.classes.animating);
    transitionWrapperRef.current.classList.remove(Carousel_tokens.classes.animating);
    Array.from(dotWrapperRef.current.children).forEach(function (child) {
      var _child$classList;
      (_child$classList = child.classList).remove.apply(_child$classList, [Carousel_tokens.classes.active, Carousel_tokens.classes.animateOut, Carousel_tokens.classes.temporaryNatural, Carousel_tokens.classes.shrinking]);
      var node = child;
      node.style.animationDelay = '';
      node.style.animationDuration = '';
    });
    (_dotWrapperRef$curren = dotWrapperRef.current.children[activeIndex]) === null || _dotWrapperRef$curren === void 0 || _dotWrapperRef$curren.classList.add(Carousel_tokens.classes.active);
    if (centered) {
      transitionWrapperRef.current.style.transform = "translateX(".concat(visibleCount * SIZE / 2 - SIZE / 2 - activeIndex * SIZE, "px)");
    } else {
      transitionWrapperRef.current.style.transform = 'translateX(0)';
    }
    leftAnimationWrapperRef.current.innerText = '';
    rightAnimationWrapperRef.current.innerText = '';
    prevIndex.current = index$1;
    prevActiveIndex.current = activeIndex;
    isAnimating.current = false;
  };
  var handleClick = function handleClick(i) {
    if (isAnimating.current) return;
    if (onChange) {
      onChange(index$1 + (i - activeIndex));
    }
  };
  var handleTransitionEnd = function handleTransitionEnd(event) {
    if (!dotWrapperRef || !dotWrapperRef.current || !transitionWrapperRef || !transitionWrapperRef.current || !rightAnimationWrapperRef || !rightAnimationWrapperRef.current || !leftAnimationWrapperRef || !leftAnimationWrapperRef.current) {
      return;
    }
    if (event.target !== event.currentTarget || event.propertyName !== 'transform') {
      return;
    }
    syncDotsState();
  };
  React.useLayoutEffect(function () {
    if (!dotWrapperRef || !dotWrapperRef.current || !transitionWrapperRef || !transitionWrapperRef.current) {
      return;
    }

    // Вычисляем начальный сдвиг по горизонтали, чтобы точка стала по центру
    if (centered) {
      transitionWrapperRef.current.style.transform = "translateX(".concat(visibleCount * SIZE / 2 - SIZE / 2 - activeIndex * SIZE, "px)");
    }
    prevIndex.current = index$1;
    prevActiveIndex.current = activeIndex;
  }, []);
  useDidMountLayoutEffect.useDidMountLayoutEffect(function () {
    var _dotWrapperRef$curren2;
    if (!dotWrapperRef || !dotWrapperRef.current || !transitionWrapperRef || !transitionWrapperRef.current || !leftAnimationWrapperRef || !leftAnimationWrapperRef.current || !rightAnimationWrapperRef || !rightAnimationWrapperRef.current) {
      return;
    }
    if (isAnimating.current) {
      syncDotsState();
      return;
    }
    isAnimating.current = true;
    dotWrapperRef.current.classList.add(Carousel_tokens.classes.animating);
    transitionWrapperRef.current.classList.add(Carousel_tokens.classes.animating);
    var targetIndex = index.getTargetIndex(index$1, prevIndex.current, prevActiveIndex.current, diffDotsRange, visibleCount);
    var dotsToAdd = Math.abs(targetIndex - activeIndex);
    if (dotsToAdd === 0) {
      syncDotsState();
      return;
    }
    if (centered) {
      transitionWrapperRef.current.style.transform = "translateX(".concat(visibleCount * SIZE / 2 - SIZE / 2 - targetIndex * SIZE, "px)");
    } else if (dotsToAdd > 0) {
      transitionWrapperRef.current.style.transform = "translateX(".concat(-SIZE * (targetIndex - activeIndex), "px)");
    }

    // Стираем все активные классы и устанавливаем активный класс на таргет.
    // В конце анимации произойдет переопределение активного класса.
    Array.from(dotWrapperRef.current.children).forEach(function (child) {
      child.classList.remove(Carousel_tokens.classes.active);
    });
    (_dotWrapperRef$curren2 = dotWrapperRef.current.children[targetIndex]) === null || _dotWrapperRef$curren2 === void 0 || _dotWrapperRef$curren2.classList.add(Carousel_tokens.classes.active);
    if (index$1 > prevIndex.current) {
      // Двигаемся вправо

      // Если мы добавляем 1 и более точек, то нужно начать
      // приводить размер крайней правой точки (что будет в m размере?)
      // к натуральному размеру
      if (dotsToAdd >= 1) {
        var _dotWrapperRef$curren3;
        (_dotWrapperRef$curren3 = dotWrapperRef.current.children[visibleCount - 1]) === null || _dotWrapperRef$curren3 === void 0 || _dotWrapperRef$curren3.classList.add(Carousel_tokens.classes.temporaryNatural);
      }

      // Т.к. мы двигаемся вправо, то нужно начать уменьшать размер крайней левой точки
      // (опять же, что в m size?)
      if (dotsToAdd >= 1) {
        var _dotWrapperRef$curren4;
        (_dotWrapperRef$curren4 = dotWrapperRef.current.children[dotsToAdd]) === null || _dotWrapperRef$curren4 === void 0 || _dotWrapperRef$curren4.classList.add(Carousel_tokens.classes.shrinking);
      }
      if (dotsToAdd > 0) {
        var _loop = function _loop() {
            var _dotWrapperRef$curren5;
            var node = document.createElement('div');
            node.textContent = '';
            node.classList.add(Carousel_tokens.classes.dot);
            node.style.opacity = '0';
            var delay = i * (ANIMATION_DURATION / dotsToAdd);
            node.style.animationDelay = "".concat(delay, "s");
            rightAnimationWrapperRef.current.appendChild(node);
            var duration = ANIMATION_DURATION / dotsToAdd;
            requestAnimationFrame(function () {
              node.classList.add(Carousel_tokens.classes.animateIn);
              node.style.animationDuration = "".concat(duration, "s");
            });
            var currentDomNode = (_dotWrapperRef$curren5 = dotWrapperRef.current.children) === null || _dotWrapperRef$curren5 === void 0 ? void 0 : _dotWrapperRef$curren5[i];
            if (!currentDomNode) {
              return {
                v: void 0
              };
            }
            currentDomNode.classList.add(Carousel_tokens.classes.animateOut);
            currentDomNode.style.animationDelay = "".concat(delay, "s");
            currentDomNode.style.animationDuration = "".concat(duration, "s");
          },
          _ret;
        for (var i = 0; i < dotsToAdd; i++) {
          _ret = _loop();
          if (_ret) return _ret.v;
        }
      }
    } else {
      // Двигаемся влево

      // Если мы добавляем 1 и более точек, то нужно начать
      // приводить размер крайней левой точки (что будет в m размере?)
      // к натуральному размеру.
      if (dotsToAdd >= 1) {
        var _dotWrapperRef$curren6;
        (_dotWrapperRef$curren6 = dotWrapperRef.current.children[0]) === null || _dotWrapperRef$curren6 === void 0 || _dotWrapperRef$curren6.classList.add(Carousel_tokens.classes.temporaryNatural);
      }

      // Т.к. мы двигаемся влево, то нужно начать уменьшать размер крайней правой точки
      // (опять же, что в m size?)
      if (dotsToAdd >= 1) {
        var _dotWrapperRef$curren7;
        (_dotWrapperRef$curren7 = dotWrapperRef.current.children[visibleCount - 1 - dotsToAdd]) === null || _dotWrapperRef$curren7 === void 0 || _dotWrapperRef$curren7.classList.add(Carousel_tokens.classes.shrinking);
      }
      if (dotsToAdd > 0) {
        var _loop2 = function _loop2() {
            var _dotWrapperRef$curren8;
            var node = document.createElement('div');
            node.textContent = '';
            node.classList.add(Carousel_tokens.classes.dot);
            node.style.opacity = '0';
            var delay = (dotsToAdd - 1 - _i) * (ANIMATION_DURATION / dotsToAdd);
            node.style.animationDelay = "".concat(delay, "s");
            leftAnimationWrapperRef.current.prepend(node);
            var duration = ANIMATION_DURATION / dotsToAdd;
            requestAnimationFrame(function () {
              node.classList.add(Carousel_tokens.classes.animateIn);
              node.style.animationDuration = "".concat(duration, "s");
            });
            var currentDomNode = (_dotWrapperRef$curren8 = dotWrapperRef.current.children) === null || _dotWrapperRef$curren8 === void 0 ? void 0 : _dotWrapperRef$curren8[dotWrapperRef.current.children.length - 1 - _i];
            if (!currentDomNode) {
              return {
                v: void 0
              };
            }
            currentDomNode.classList.add(Carousel_tokens.classes.animateOut);
            currentDomNode.style.animationDelay = "".concat(_i * (ANIMATION_DURATION / dotsToAdd), "s");
            currentDomNode.style.animationDuration = "".concat(duration, "s");
          },
          _ret2;
        for (var _i = dotsToAdd - 1; _i >= 0; _i--) {
          _ret2 = _loop2();
          if (_ret2) return _ret2.v;
        }
      }
    }
  }, [index$1]);
  return /*#__PURE__*/React__default.default.createElement(Dots_styles.Wrapper, null, /*#__PURE__*/React__default.default.createElement(Dots_styles.TransitionWrapper, {
    ref: transitionWrapperRef,
    onTransitionEnd: handleTransitionEnd
  }, /*#__PURE__*/React__default.default.createElement(Dots_styles.LeftAnimationWrapper, {
    ref: leftAnimationWrapperRef
  }), /*#__PURE__*/React__default.default.createElement(Dots_styles.DotWrapper, {
    ref: dotWrapperRef,
    className: cls__default.default(hiddenDotsLeft && Carousel_tokens.classes.availableDotsLeft, hiddenDotsRight && Carousel_tokens.classes.availableDotsRight)
  }, Array(visibleCount).fill(0).map(function (_, i) {
    return /*#__PURE__*/React__default.default.createElement("div", {
      key: i,
      className: cls__default.default(Carousel_tokens.classes.dot, i === activeIndex && Carousel_tokens.classes.active),
      onClick: function onClick() {
        return handleClick(i);
      }
    });
  })), /*#__PURE__*/React__default.default.createElement(Dots_styles.RightAnimationWrapper, {
    ref: rightAnimationWrapperRef
  })));
});

exports.Dots = Dots;
