import { __assign } from "tslib";
import React, { useRef, useEffect, useState } from 'react';
import classNames from 'classnames';
import DotGroup from './dot-group';
import ArrowGroup from './arrow-group';
var Carousel = function (props) {
    var _a = props.prefixCls, prefixCls = _a === void 0 ? 'ty-carousel' : _a, _b = props.dots, dots = _b === void 0 ? true : _b, _c = props.arrows, arrows = _c === void 0 ? true : _c, _d = props.interval, interval = _d === void 0 ? 3000 : _d, _e = props.animatedDuration, animatedDuration = _e === void 0 ? 500 : _e, _f = props.autoplay, autoplay = _f === void 0 ? true : _f, _g = props.dotPosition, dotPosition = _g === void 0 ? 'bottom' : _g, _h = props.easing, easing = _h === void 0 ? 'linear' : _h, className = props.className, style = props.style, children = props.children;
    var cls = classNames(prefixCls, className);
    var outerRef = useRef(null);
    var containerRef = useRef(null);
    var _j = useState(0), width = _j[0], setWidth = _j[1];
    var _k = useState(0), currIndex = _k[0], setCurrIndex = _k[1];
    var _l = useState(undefined), intervalTimer = _l[0], setIntervalTimer = _l[1];
    var animate = function (distance, isAnimated) {
        if (isAnimated === void 0) { isAnimated = true; }
        if (containerRef.current) {
            var container = containerRef.current;
            container.style.transitionDuration = isAnimated ? animatedDuration + "ms" : '0s';
            container.style.left = parseInt(container.style.left, 10) + distance + 'px';
        }
    };
    var movePrev = function () {
        var prevIndex = currIndex - 1;
        setCurrIndex(prevIndex);
        animate(width);
        if (prevIndex === -1) {
            setCurrIndex(children.length - 1);
            window.setTimeout(function () {
                var distance = children.length * width;
                animate(-distance, false);
            }, animatedDuration);
        }
    };
    var moveNext = function () {
        var nextIndex = currIndex + 1;
        setCurrIndex(nextIndex);
        animate(-width);
        if (nextIndex === children.length) {
            setCurrIndex(0);
            window.setTimeout(function () {
                var distance = children.length * width;
                animate(distance, false);
            }, 600);
        }
    };
    var dotItemOnClick = function (index) {
        setCurrIndex(index);
        animate(width * Math.abs(index - currIndex) * (index > currIndex ? -1 : 1));
    };
    var getChildrenList = function () {
        var finalChildren = [];
        finalChildren.push(children[children.length - 1]);
        React.Children.forEach(children, function (child) {
            finalChildren.push(child);
        });
        finalChildren.push(children[0]);
        return finalChildren;
    };
    useEffect(function () {
        if (outerRef.current && containerRef.current) {
            var outerWidth_1 = outerRef.current.clientWidth;
            setWidth(outerWidth_1);
            containerRef.current.style.left = -outerWidth_1 + "px";
        }
    }, []);
    useEffect(function () {
        if (autoplay) {
            var intervalTimer_1 = window.setInterval(function () {
                moveNext();
            }, interval);
            setIntervalTimer(intervalTimer_1);
        }
        return function () {
            window.clearInterval(intervalTimer);
        };
    }, [autoplay]);
    return (React.createElement("div", { ref: outerRef, className: cls, style: style },
        React.createElement("ul", { ref: containerRef, className: cls + "__container", style: {
                transitionTimingFunction: easing,
                width: width * (children.length + 2),
            } }, getChildrenList().map(function (child, index) {
            var childProps = __assign(__assign({ key: index }, child.props), { style: __assign({ width: width }, child.props.style) });
            return React.cloneElement(child, childProps);
        })),
        arrows && (React.createElement(ArrowGroup, { leftBtnOnClick: movePrev, rightBtnOnClick: moveNext, prefixCls: prefixCls, style: { width: width } })),
        dots && (React.createElement(DotGroup, { activeIndex: currIndex, position: dotPosition, amount: children.length, itemOnClick: dotItemOnClick, prefixCls: prefixCls }))));
};
export default Carousel;
//# sourceMappingURL=carousel.js.map