"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "Dots", {
    enumerable: true,
    get: function() {
        return Dots;
    }
});
var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
var _hooks = require("../../../../../hooks");
var _Carouseltokens = require("../../Carousel.tokens");
var _index = require("./utils/index");
var _Dotsstyles = require("./Dots.styles");
function _array_like_to_array(arr, len) {
    if (len == null || len > arr.length) len = arr.length;
    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
    return arr2;
}
function _array_with_holes(arr) {
    if (Array.isArray(arr)) return arr;
}
function _interop_require_default(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    };
}
function _getRequireWildcardCache(nodeInterop) {
    if (typeof WeakMap !== "function") return null;
    var cacheBabelInterop = new WeakMap();
    var cacheNodeInterop = new WeakMap();
    return (_getRequireWildcardCache = function(nodeInterop) {
        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
    })(nodeInterop);
}
function _interop_require_wildcard(obj, nodeInterop) {
    if (!nodeInterop && obj && obj.__esModule) {
        return obj;
    }
    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
        return {
            default: obj
        };
    }
    var cache = _getRequireWildcardCache(nodeInterop);
    if (cache && cache.has(obj)) {
        return cache.get(obj);
    }
    var newObj = {
        __proto__: null
    };
    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
    for(var key in obj){
        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
            if (desc && (desc.get || desc.set)) {
                Object.defineProperty(newObj, key, desc);
            } else {
                newObj[key] = obj[key];
            }
        }
    }
    newObj.default = obj;
    if (cache) {
        cache.set(obj, newObj);
    }
    return newObj;
}
function _iterable_to_array_limit(arr, i) {
    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
    if (_i == null) return;
    var _arr = [];
    var _n = true;
    var _d = false;
    var _s, _e;
    try {
        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
            _arr.push(_s.value);
            if (i && _arr.length === i) break;
        }
    } catch (err) {
        _d = true;
        _e = err;
    } finally{
        try {
            if (!_n && _i["return"] != null) _i["return"]();
        } finally{
            if (_d) throw _e;
        }
    }
    return _arr;
}
function _non_iterable_rest() {
    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _sliced_to_array(arr, i) {
    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
}
function _type_of(obj) {
    "@swc/helpers - typeof";
    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
}
function _unsupported_iterable_to_array(o, minLen) {
    if (!o) return;
    if (typeof o === "string") return _array_like_to_array(o, minLen);
    var n = Object.prototype.toString.call(o).slice(8, -1);
    if (n === "Object" && o.constructor) n = o.constructor.name;
    if (n === "Map" || n === "Set") return Array.from(n);
    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
}
var SIZE = 16; // размер точки в px
var ANIMATION_DURATION = 0.3; // скорость анимации в секундах
var Dots = /*#__PURE__*/ (0, _react.memo)(function(param) {
    var tmp = param.index, originalIndex = tmp === void 0 ? 0 : tmp, onChange = param.onChange, _param_centered = param.centered, centered = _param_centered === void 0 ? false : _param_centered, _param_count = param.count, count = _param_count === void 0 ? 0 : _param_count, tmp1 = param.visibleCount, originalVisibleCount = tmp1 === void 0 ? 0 : tmp1;
    // Трансформируем входные параметры для корректной работы в дальнейшем
    var _getInitialData = _sliced_to_array((0, _index.getInitialData)(originalIndex, count, originalVisibleCount), 2), index = _getInitialData[0], visibleCount = _getInitialData[1];
    // Рефки на DOM-ноды
    var transitionWrapperRef = (0, _react.useRef)(null);
    var dotWrapperRef = (0, _react.useRef)(null);
    var leftAnimationWrapperRef = (0, _react.useRef)(null);
    var rightAnimationWrapperRef = (0, _react.useRef)(null);
    // Консистентные переменные
    var isAnimating = (0, _react.useRef)(false);
    var prevIndex = (0, _react.useRef)(-Infinity);
    var prevActiveIndex = (0, _react.useRef)(Infinity);
    var isRightDirection = index > prevIndex.current;
    var diffDotsRange = Math.abs(index - prevIndex.current);
    var activeIndex = (0, _index.getActiveIndex)(index, isRightDirection, count, visibleCount);
    var hiddenDotsLeft = activeIndex < index;
    var hiddenDotsRight = index + (visibleCount - 1 - activeIndex) < count - 1;
    var syncDotsState = function syncDotsState() {
        var _dotWrapperRef_current_children_activeIndex;
        if (!dotWrapperRef.current || !transitionWrapperRef.current || !leftAnimationWrapperRef.current || !rightAnimationWrapperRef.current) {
            return;
        }
        dotWrapperRef.current.classList.remove(_Carouseltokens.classes.animating);
        transitionWrapperRef.current.classList.remove(_Carouseltokens.classes.animating);
        Array.from(dotWrapperRef.current.children).forEach(function(child) {
            var _child_classList;
            (_child_classList = child.classList).remove.apply(_child_classList, [
                _Carouseltokens.classes.active,
                _Carouseltokens.classes.animateOut,
                _Carouseltokens.classes.temporaryNatural,
                _Carouseltokens.classes.shrinking
            ]);
            var node = child;
            node.style.animationDelay = '';
            node.style.animationDuration = '';
        });
        (_dotWrapperRef_current_children_activeIndex = dotWrapperRef.current.children[activeIndex]) === null || _dotWrapperRef_current_children_activeIndex === void 0 ? void 0 : _dotWrapperRef_current_children_activeIndex.classList.add(_Carouseltokens.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;
        prevActiveIndex.current = activeIndex;
        isAnimating.current = false;
    };
    var handleClick = function handleClick(i) {
        if (isAnimating.current) return;
        if (onChange) {
            onChange(index + (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();
    };
    (0, _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;
        prevActiveIndex.current = activeIndex;
    }, []);
    (0, _hooks.useDidMountLayoutEffect)(function() {
        var _dotWrapperRef_current_children_targetIndex;
        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(_Carouseltokens.classes.animating);
        transitionWrapperRef.current.classList.add(_Carouseltokens.classes.animating);
        var targetIndex = (0, _index.getTargetIndex)(index, 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(_Carouseltokens.classes.active);
        });
        (_dotWrapperRef_current_children_targetIndex = dotWrapperRef.current.children[targetIndex]) === null || _dotWrapperRef_current_children_targetIndex === void 0 ? void 0 : _dotWrapperRef_current_children_targetIndex.classList.add(_Carouseltokens.classes.active);
        if (index > prevIndex.current) {
            // Двигаемся вправо
            // Если мы добавляем 1 и более точек, то нужно начать
            // приводить размер крайней правой точки (что будет в m размере?)
            // к натуральному размеру
            if (dotsToAdd >= 1) {
                var _dotWrapperRef_current_children_;
                (_dotWrapperRef_current_children_ = dotWrapperRef.current.children[visibleCount - 1]) === null || _dotWrapperRef_current_children_ === void 0 ? void 0 : _dotWrapperRef_current_children_.classList.add(_Carouseltokens.classes.temporaryNatural);
            }
            // Т.к. мы двигаемся вправо, то нужно начать уменьшать размер крайней левой точки
            // (опять же, что в m size?)
            if (dotsToAdd >= 1) {
                var _dotWrapperRef_current_children_dotsToAdd;
                (_dotWrapperRef_current_children_dotsToAdd = dotWrapperRef.current.children[dotsToAdd]) === null || _dotWrapperRef_current_children_dotsToAdd === void 0 ? void 0 : _dotWrapperRef_current_children_dotsToAdd.classList.add(_Carouseltokens.classes.shrinking);
            }
            if (dotsToAdd > 0) {
                var _loop = function(i) {
                    var _dotWrapperRef_current_children;
                    var node = document.createElement('div');
                    node.textContent = '';
                    node.classList.add(_Carouseltokens.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(_Carouseltokens.classes.animateIn);
                        node.style.animationDuration = "".concat(duration, "s");
                    });
                    var currentDomNode = (_dotWrapperRef_current_children = dotWrapperRef.current.children) === null || _dotWrapperRef_current_children === void 0 ? void 0 : _dotWrapperRef_current_children[i];
                    if (!currentDomNode) {
                        return {
                            v: void void 0
                        };
                    }
                    currentDomNode.classList.add(_Carouseltokens.classes.animateOut);
                    currentDomNode.style.animationDelay = "".concat(delay, "s");
                    currentDomNode.style.animationDuration = "".concat(duration, "s");
                };
                for(var i = 0; i < dotsToAdd; i++){
                    var _ret = _loop(i);
                    if (_type_of(_ret) === "object") return _ret.v;
                }
            }
        } else {
            // Двигаемся влево
            // Если мы добавляем 1 и более точек, то нужно начать
            // приводить размер крайней левой точки (что будет в m размере?)
            // к натуральному размеру.
            if (dotsToAdd >= 1) {
                var _dotWrapperRef_current_children_1;
                (_dotWrapperRef_current_children_1 = dotWrapperRef.current.children[0]) === null || _dotWrapperRef_current_children_1 === void 0 ? void 0 : _dotWrapperRef_current_children_1.classList.add(_Carouseltokens.classes.temporaryNatural);
            }
            // Т.к. мы двигаемся влево, то нужно начать уменьшать размер крайней правой точки
            // (опять же, что в m size?)
            if (dotsToAdd >= 1) {
                var _dotWrapperRef_current_children_2;
                (_dotWrapperRef_current_children_2 = dotWrapperRef.current.children[visibleCount - 1 - dotsToAdd]) === null || _dotWrapperRef_current_children_2 === void 0 ? void 0 : _dotWrapperRef_current_children_2.classList.add(_Carouseltokens.classes.shrinking);
            }
            if (dotsToAdd > 0) {
                var _loop1 = function(i1) {
                    var _dotWrapperRef_current_children;
                    var node = document.createElement('div');
                    node.textContent = '';
                    node.classList.add(_Carouseltokens.classes.dot);
                    node.style.opacity = '0';
                    var delay = (dotsToAdd - 1 - i1) * (ANIMATION_DURATION / dotsToAdd);
                    node.style.animationDelay = "".concat(delay, "s");
                    leftAnimationWrapperRef.current.prepend(node);
                    var duration = ANIMATION_DURATION / dotsToAdd;
                    requestAnimationFrame(function() {
                        node.classList.add(_Carouseltokens.classes.animateIn);
                        node.style.animationDuration = "".concat(duration, "s");
                    });
                    var currentDomNode = (_dotWrapperRef_current_children = dotWrapperRef.current.children) === null || _dotWrapperRef_current_children === void 0 ? void 0 : _dotWrapperRef_current_children[dotWrapperRef.current.children.length - 1 - i1];
                    if (!currentDomNode) {
                        return {
                            v: void void 0
                        };
                    }
                    currentDomNode.classList.add(_Carouseltokens.classes.animateOut);
                    currentDomNode.style.animationDelay = "".concat(i1 * (ANIMATION_DURATION / dotsToAdd), "s");
                    currentDomNode.style.animationDuration = "".concat(duration, "s");
                };
                for(var i1 = dotsToAdd - 1; i1 >= 0; i1--){
                    var _ret1 = _loop1(i1);
                    if (_type_of(_ret1) === "object") return _ret1.v;
                }
            }
        }
    }, [
        index
    ]);
    return /*#__PURE__*/ _react.default.createElement(_Dotsstyles.Wrapper, null, /*#__PURE__*/ _react.default.createElement(_Dotsstyles.TransitionWrapper, {
        ref: transitionWrapperRef,
        onTransitionEnd: handleTransitionEnd
    }, /*#__PURE__*/ _react.default.createElement(_Dotsstyles.LeftAnimationWrapper, {
        ref: leftAnimationWrapperRef
    }), /*#__PURE__*/ _react.default.createElement(_Dotsstyles.DotWrapper, {
        ref: dotWrapperRef,
        className: (0, _classnames.default)(hiddenDotsLeft && _Carouseltokens.classes.availableDotsLeft, hiddenDotsRight && _Carouseltokens.classes.availableDotsRight)
    }, Array(visibleCount).fill(0).map(function(_, i) {
        return /*#__PURE__*/ _react.default.createElement("div", {
            key: i,
            className: (0, _classnames.default)(_Carouseltokens.classes.dot, i === activeIndex && _Carouseltokens.classes.active),
            onClick: function onClick() {
                return handleClick(i);
            }
        });
    })), /*#__PURE__*/ _react.default.createElement(_Dotsstyles.RightAnimationWrapper, {
        ref: rightAnimationWrapperRef
    })));
});
