"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = (0, tslib_1.__importStar)(require("react"));
var react_1 = require("react");
var propTypes = (0, tslib_1.__importStar)(require("prop-types"));
var classnames_1 = (0, tslib_1.__importDefault)(require("../../utils/classnames"));
var react_easy_swipe_1 = (0, tslib_1.__importDefault)(require("react-easy-swipe"));
require("./index.css");
function Swiper(_a) {
    var children = _a.children, className = _a.className, _b = _a.style, style = _b === void 0 ? {} : _b, autoplay = _a.autoplay, circular = _a.circular, vertical = _a.vertical, indicatorDots = _a.indicatorDots, indicatorColor = _a.indicatorColor, indicatorActiveColor = _a.indicatorActiveColor, _c = _a.duration, duration = _c === void 0 ? 500 : _c, _d = _a.interval, interval = _d === void 0 ? 5000 : _d, _e = _a.current, current = _e === void 0 ? 0 : _e, _f = _a.events, events = _f === void 0 ? {} : _f, id = _a.id;
    var itemCount = React.Children.count(children);
    current = Math.max(0, Math.min(itemCount - 1, current));
    var _g = (0, tslib_1.__read)((0, react_1.useState)(current), 2), currentIndex = _g[0], setCurrentIndex = _g[1];
    var _h = (0, tslib_1.__read)((0, react_1.useState)(null), 2), swipeStyle = _h[0], setSwipeStyle = _h[1];
    var _j = (0, tslib_1.__read)((0, react_1.useState)(0), 2), height = _j[0], setHeight = _j[1];
    var _k = events.change, change = _k === void 0 ? function () { } : _k;
    // 自动切换
    (0, react_1.useEffect)(function () {
        if (autoplay) {
            var timer_1 = setInterval(function () {
                setIndex(currentIndex + 1);
            }, interval);
            return function () { return clearInterval(timer_1); };
        }
    }, [currentIndex, autoplay]);
    // 触发切换
    var pre = (0, react_1.useRef)({ index: currentIndex }).current;
    (0, react_1.useEffect)(function () {
        updateSwipeStyle(currentIndex, pre.index, itemCount);
        change({
            current: currentIndex,
        });
        return function () {
            pre.index = currentIndex;
        };
    }, [currentIndex, vertical]);
    var cb = (0, react_1.useCallback)(function (node) {
        if (node) {
            var h = node.children[0] &&
                node.children[0].getBoundingClientRect() &&
                node.children[0].getBoundingClientRect().height;
            if (h && height) {
                setHeight(Math.min(h, height));
            }
            else {
                setHeight(Math.max(h, height));
            }
        }
    }, [height]);
    var itemsClone = React.Children.map(children, function (x, i) {
        return (React.createElement("div", { className: "g-swiper-item", "data-index": i }, x));
    });
    var setIndex = function (index) {
        if (index >= itemCount) {
            index = 0;
        }
        if (index < 0) {
            index = itemCount - 1;
        }
        setCurrentIndex(index);
    };
    // 设置容器样式、动画
    // TODO fix settimeout mess
    var updateSwipeStyle = function (to, cur, length) {
        var style;
        // 最后向前到最开始
        if (to === 0 && cur === length - 1) {
            circular &&
                setSwipeStyle({
                    transform: "translate3d(0, 0, 0)",
                });
            setTimeout(function () {
                setSwipeStyle({
                    transform: vertical
                        ? "translate3d(0, -100%, 0)"
                        : "translate3d(-100%, 0, 0)",
                    transitionDuration: duration + "ms",
                });
            }, 50);
            return;
        }
        // 第一个后退到最后
        if (to === length - 1 && cur === 0) {
            circular &&
                setSwipeStyle({
                    transform: vertical
                        ? "translate3d(0, -" + (to + 2) * 100 + "%, 0)"
                        : "translate3d(-" + (to + 2) * 100 + "%, 0, 0)",
                });
            setTimeout(function () {
                setSwipeStyle({
                    transform: vertical
                        ? "translate3d(0, -" + (to + 1) * 100 + "%, 0)"
                        : "translate3d(-" + (to + 1) * 100 + "%, 0, 0)",
                    transitionDuration: duration + "ms",
                });
            }, 50);
            return;
        }
        style = {
            transform: vertical
                ? "translate3d(0, -" + (to + 1) * 100 + "%, 0)"
                : "translate3d(-" + (to + 1) * 100 + "%, 0, 0)",
        };
        if (to !== cur) {
            style.transitionDuration = duration + "ms";
        }
        setSwipeStyle(style);
    };
    return (React.createElement("div", { className: (0, classnames_1.default)('g-swiper weda-ui', className, {
            vertical: vertical,
        }), style: (0, tslib_1.__assign)({ height: height ? height : 'auto' }, style), onLoad: function (e) {
            cb(e.target.closest('.g-swiper-item'));
        }, id: id },
        itemCount > 0 ? (React.createElement(react_easy_swipe_1.default, { className: "g-swiper-list", style: swipeStyle, tolerance: 20, onSwipeLeft: function () {
                vertical || setIndex(currentIndex + 1);
            }, onSwipeRight: function () {
                vertical || setIndex(currentIndex - 1);
            }, onSwipeDown: function () {
                vertical && setIndex(currentIndex - 1);
            }, onSwipeUp: function () {
                vertical && setIndex(currentIndex + 1);
            } },
            itemsClone[itemCount - 1],
            React.Children.map(children, function (x, i) {
                return (React.createElement("div", { className: (0, classnames_1.default)('g-swiper-item', {
                        current: i === currentIndex,
                    }), ref: cb, "data-index": i }, x));
            }),
            itemsClone[0])) : null,
        indicatorDots ? (React.createElement("div", { className: "g-swiper__pagination" }, React.Children.map(children, function (x, i) {
            return (React.createElement("a", { href: "#", className: "g-swiper__pagination-bulletm", style: {
                    backgroundColor: currentIndex === i ? indicatorActiveColor : indicatorColor,
                }, onClick: function (e) {
                    setIndex(i);
                    e.preventDefault();
                }, "data-index": i }));
        }))) : (false),
        React.createElement("a", { href: "javascript:;", className: "g-swiper__turn-pre", onClick: function () {
                setIndex(currentIndex - 1);
            } }, "\u4E0A\u4E00\u9875"),
        React.createElement("a", { href: "javascript:;", className: "g-swiper__turn-next", onClick: function () {
                setIndex(currentIndex + 1);
            } }, "\u4E0B\u4E00\u9875")));
}
exports.default = Swiper;
Swiper.defaultProps = {
    current: 0,
    duration: 500,
    indicatorDots: true,
    autoplay: true,
    circular: true,
    interval: 5000,
    vertical: false,
    indicatorColor: 'rgba(200, 200, 200, 0.9)',
    indicatorActiveColor: 'rgba(0, 0, 0, 0.9)',
};
Swiper.propTypes = {
    /**
     * 是否启用指示点
     */
    indicatorDots: propTypes.bool,
    /**
     * 是否自动切换
     */
    autoplay: propTypes.bool,
    /**
     * 当前索引值
     */
    current: propTypes.number,
    interval: propTypes.number,
    duration: propTypes.number,
    circular: propTypes.bool,
    vertical: propTypes.bool,
    indicatorColor: propTypes.string,
    indicatorActiveColor: propTypes.string,
    children: propTypes.any,
    className: propTypes.string,
    style: propTypes.object,
    events: propTypes.objectOf(propTypes.func),
    id: propTypes.string,
};
//# sourceMappingURL=index.js.map