import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component, Children, cloneElement } from 'react';
import cx from 'classnames';
import { WindowResizeHandler } from '../utils/component/WindowResizeHandler';
import Icon from '../icon';
import SwiperDots from './SwiperDots';
function setStyle(target, styles) {
    var style = target.style;
    Object.keys(styles).forEach(function (attribute) {
        style[attribute] = styles[attribute];
    });
}
var defaultRenderPrevArrow = function (onPrev, disabled) {
    return (_jsx("div", __assign({ className: cx('zent-swiper__arrow', 'zent-swiper__arrow-left', {
            'zent-swiper__arrow--disabled': disabled,
        }), onClick: !disabled ? onPrev : undefined, "data-zv": 'v10.0.11' }, { children: _jsx(Icon, { type: "right-circle", className: "zent-swiper__arrow-icon" }, void 0) }), void 0));
};
var defaultRenderNextArrow = function (onNext, disabled) {
    return (_jsx("div", __assign({ className: cx('zent-swiper__arrow', 'zent-swiper__arrow-right', {
            'zent-swiper__arrow--disabled': disabled,
        }), onClick: !disabled ? onNext : undefined, "data-zv": 'v10.0.11' }, { children: _jsx(Icon, { type: "right-circle", className: "zent-swiper__arrow-icon" }, void 0) }), void 0));
};
var Swiper = (function (_super) {
    __extends(Swiper, _super);
    function Swiper() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            currentIndex: 0,
        };
        _this.init = function (isResetToOrigin) {
            if (isResetToOrigin === void 0) { isResetToOrigin = false; }
            var _a = _this.props, autoplay = _a.autoplay, children = _a.children;
            var currentIndex = _this.state.currentIndex;
            var childrenCount = Children.count(children);
            var innerElements = _this.swiperContainer.children;
            _this.clearAutoplay();
            _this.setSwiperWidth();
            setStyle(_this.swiperContainer, {
                width: _this.swiperWidth * innerElements.length + "px",
            });
            for (var i = 0; i < innerElements.length; i++) {
                var item = innerElements[i];
                setStyle(item, {
                    width: 100 / innerElements.length + "%",
                });
            }
            isResetToOrigin && _this.translate(-1, null, true);
            if (childrenCount > 1) {
                autoplay && _this.startAutoplay();
                _this.translate(currentIndex, null, true);
            }
        };
        _this.getSwiper = function (swiper) {
            _this.swiper = swiper;
        };
        _this.getSwiperContainer = function (swiperContainer) {
            _this.swiperContainer = swiperContainer;
        };
        _this.setSwiperWidth = function () {
            _this.swiperWidth = _this.swiper.getBoundingClientRect().width;
        };
        _this.startAutoplay = function () {
            var autoplayInterval = _this.props.autoplayInterval;
            _this.autoplayTimer = setTimeout(_this.next, Number(autoplayInterval));
        };
        _this.clearAutoplay = function () {
            clearTimeout(_this.autoplayTimer);
            _this.autoplayTimer = undefined;
        };
        _this.next = function () {
            var currentIndex = _this.state.currentIndex;
            if (Children.count(_this.props.children) === 1) {
                return;
            }
            _this.swipeTo(currentIndex + 1);
        };
        _this.prev = function () {
            var currentIndex = _this.state.currentIndex;
            _this.swipeTo(currentIndex - 1);
        };
        _this.swipeTo = function (index) {
            if (index === _this.state.currentIndex || _this.isSwiping) {
                return;
            }
            _this.isSwiping = true;
            _this.setState({ currentIndex: index });
        };
        _this.translate = function (currentIndex, prevIndex, isSilent) {
            var _a = _this.props, autoplay = _a.autoplay, autoplayInterval = _a.autoplayInterval, transitionDuration = _a.transitionDuration, onChange = _a.onChange;
            var length = _this.props.children.length;
            var initIndex = -1;
            var itemWidth = _this.swiperWidth;
            var translateDistance = itemWidth * (initIndex - currentIndex);
            var realDuration = isSilent ? 0 : transitionDuration;
            if (autoplay && !_this.isMouseEnter) {
                clearTimeout(_this.autoplayTimer);
                _this.autoplayTimer = setTimeout(_this.next, Number(autoplayInterval));
            }
            setStyle(_this.swiperContainer, {
                transform: "translateX(" + translateDistance + "px)",
                'transition-duration': realDuration + "ms",
            });
            if (currentIndex > length - 1 || currentIndex < 0) {
                return _this.resetPosition(currentIndex);
            }
            setTimeout(function () {
                _this.isSwiping = false;
            }, realDuration);
            onChange && onChange(currentIndex, _this.getRealPrevIndex(prevIndex));
        };
        _this.resetPosition = function (currentIndex) {
            var transitionDuration = _this.props.transitionDuration;
            var length = _this.props.children.length;
            if (currentIndex < 0) {
                setTimeout(function () {
                    return _this.setState({
                        currentIndex: length - 1,
                    });
                }, transitionDuration);
            }
            else {
                setTimeout(function () {
                    return _this.setState({
                        currentIndex: 0,
                    });
                }, transitionDuration);
            }
        };
        _this.getRealPrevIndex = function (index) {
            var length = _this.props.children.length;
            if (index === null) {
                return null;
            }
            if (index > length - 1) {
                return length - 1;
            }
            if (index < 0) {
                return 0;
            }
            return index;
        };
        _this.cloneChildren = function (children) {
            var length = Children.count(children);
            if (length <= 1) {
                return children;
            }
            var clonedChildren = new Array(length + 2);
            Children.forEach(children, function (child, index) {
                clonedChildren[index + 1] = child;
                if (index === 0) {
                    clonedChildren[length + 1] = child;
                }
                else if (index === length - 1) {
                    clonedChildren[0] = child;
                }
            });
            return clonedChildren;
        };
        _this.handleMouseEnter = function () {
            var autoplay = _this.props.autoplay;
            _this.isMouseEnter = true;
            autoplay && _this.clearAutoplay();
        };
        _this.handleMouseLeave = function () {
            var autoplay = _this.props.autoplay;
            _this.isMouseEnter = false;
            autoplay && _this.startAutoplay();
        };
        _this.handleDotsClick = function (index) {
            _this.setState({ currentIndex: index });
        };
        _this.handleResize = function () { return _this.init(); };
        return _this;
    }
    Swiper.getDerivedStateFromProps = function (props, state) {
        if (!state.prevProps) {
            return {
                prevProps: props,
            };
        }
        var newChildren = props.children;
        var children = state.prevProps.children;
        if (Children.count(children) !== Children.count(newChildren)) {
            return {
                currentIndex: 0,
                prevProps: props,
            };
        }
        return null;
    };
    Swiper.prototype.componentDidMount = function () {
        this.init();
    };
    Swiper.prototype.componentDidUpdate = function (prevProps, prevState) {
        var length = this.props.children.length;
        var currentIndex = this.state.currentIndex;
        var prevIndex = prevState.currentIndex;
        var isSilent = prevIndex > length - 1 || prevIndex < 0;
        if (prevIndex !== currentIndex) {
            this.translate(currentIndex, prevIndex, isSilent);
        }
        if (Children.count(prevProps.children) !== Children.count(this.props.children)) {
            var isTwoToOneCase = Children.count(prevProps.children) === 2 &&
                Children.count(this.props.children) === 1;
            this.init(isTwoToOneCase);
        }
    };
    Swiper.prototype.componentWillUnmount = function () {
        this.clearAutoplay();
    };
    Swiper.prototype.render = function () {
        var _a = this.props, className = _a.className, dots = _a.dots, dotsColor = _a.dotsColor, dotsSize = _a.dotsSize, dotsTheme = _a.dotsTheme, arrows = _a.arrows, arrowsSize = _a.arrowsSize, arrowsType = _a.arrowsType, arrowsDisabled = _a.arrowsDisabled, children = _a.children, renderNextArrow = _a.renderNextArrow, renderPrevArrow = _a.renderPrevArrow;
        var currentIndex = this.state.currentIndex;
        var showDots = !!dots;
        var dotsType = dots === 'round' ? 'round' : 'line';
        var classString = cx('zent-swiper', className, {
            'zent-swiper-light': arrows && arrowsType === 'light',
            'zent-swiper--hover-show-arrow': arrows === 'hover',
            'zent-swiper--arrow-large': arrowsSize === 'large',
        });
        var childrenCount = Children.count(children);
        var clonedChildren = this.cloneChildren(children);
        return (_jsxs("div", __assign({ ref: this.getSwiper, className: classString, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, "data-zv": 'v10.0.11' }, { children: [arrows &&
                    childrenCount > 1 &&
                    renderPrevArrow(this.prev, arrowsDisabled.left), arrows &&
                    childrenCount > 1 &&
                    renderNextArrow(this.next, arrowsDisabled.right), _jsx("div", __assign({ ref: this.getSwiperContainer, className: "zent-swiper__container", "data-zv": 'v10.0.11' }, { children: Children.map(clonedChildren, function (child, index) {
                        return cloneElement(child, {
                            key: index - 1,
                            style: { float: 'left', height: '100%' },
                        });
                    }) }), void 0), showDots && childrenCount > 1 && (_jsx(SwiperDots, { dotsType: dotsType, dotsColor: dotsColor, dotsTheme: dotsTheme, dotsSize: dotsSize, items: children, currentIndex: currentIndex, onDotsClick: this.handleDotsClick }, void 0)), _jsx(WindowResizeHandler, { onResize: this.handleResize }, void 0)] }), void 0));
    };
    Swiper.defaultProps = {
        className: '',
        transitionDuration: 300,
        autoplay: false,
        autoplayInterval: 3000,
        dots: true,
        dotsTheme: 'dark',
        dotsSize: 'normal',
        arrows: false,
        arrowsSize: 'normal',
        arrowsType: 'dark',
        arrowsDisabled: {
            left: false,
            right: false,
        },
        renderPrevArrow: defaultRenderPrevArrow,
        renderNextArrow: defaultRenderNextArrow,
    };
    return Swiper;
}(Component));
export { Swiper };
export default Swiper;
