import React, { Component } from 'react';
import { Animated, ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
import { findDOMNode } from 'react-dom';
import { animatedScrollTo } from '../../lib/helpers';
import { PageIndicator } from '../PageIndicator';
const ScrollViewCopy = ScrollView;
const S = StyleSheet.create({
    goToNext: {
        position: 'absolute',
        top: '50%',
        right: 0,
        zIndex: 100,
        marginTop: -15,
        padding: 10
    },
    goToPrev: {
        position: 'absolute',
        top: '50%',
        left: 0,
        zIndex: 100,
        marginTop: -15,
        padding: 10
    },
    buttonPrevIcon: {
        width: 25,
        height: 25,
        borderTopWidth: 2,
        borderLeftWidth: 2,
        borderColor: 'black',
        transform: [
            {
                rotate: '-45deg'
            }
        ]
    },
    buttonNextIcon: {
        width: 25,
        height: 25,
        borderTopWidth: 2,
        borderRightWidth: 2,
        borderColor: 'black',
        transform: [
            {
                rotate: '45deg'
            }
        ]
    }
});
export class MultiCarousel extends Component {
    constructor(props) {
        super(props);
        this.currentScrollX = 0;
        this.initialScrollX = 0;
        this.initialScrollXTime = Date.now();
        this.defaultPeekSize = 0;
        this.defaultItemsPerPage = 2;
        this.initialized = false;
        this.opcacity = new Animated.Value(0);
        this.handleContainerSizeChange = (e) => {
            const containerWidth = e.nativeEvent.layout.width;
            this.setState({
                containerWidth,
                itemWidth: this.getItemWidth(containerWidth)
            });
            if (!this.initialized) {
                this.initialized = true;
                Animated.timing(this.opcacity, {
                    toValue: 1,
                    useNativeDriver: true
                }).start();
            }
        };
        this.goToNext = (options) => {
            options = options || { animated: true };
            const { currentIndex } = this.state;
            const nextIndex = currentIndex + 1 > this.getPageNum() - 1
                ? this.getPageNum() - 1
                : currentIndex + 1;
            this.goTo(nextIndex, options);
        };
        this.goToPrev = (options) => {
            options = options || { animated: true };
            const { currentIndex } = this.state;
            const nextIndex = currentIndex - 1 < 0 ? 0 : currentIndex - 1;
            this.goTo(nextIndex, options);
        };
        this.goTo = (index, options) => {
            animatedScrollTo(findDOMNode(this.scrollView), index * this.getPageWidth(), 200);
            if (this.props.onSlideChange && this.state.currentIndex !== index) {
                this.props.onSlideChange({
                    currentIndex: this.state.currentIndex,
                    nextIndex: index
                });
            }
            this.setState({
                currentIndex: index
            });
        };
        this.goToOrigin = () => {
            const { currentIndex } = this.state;
            this.goTo(currentIndex);
        };
        this.getPageNum = () => {
            return Math.ceil(this.props.items.length /
                (this.props.itemsPerPage || this.defaultItemsPerPage));
        };
        this.getPageWidth = () => {
            return (this.state.itemWidth *
                (this.props.itemsPerPage || this.defaultItemsPerPage));
        };
        this.getItemWidth = (containerWidth) => {
            const peekSize = this.props.peekSize || this.defaultPeekSize;
            const itemPerPage = this.props.itemsPerPage || this.defaultItemsPerPage;
            return ((containerWidth - peekSize * (this.props.centerMode ? 2 : 1)) /
                itemPerPage);
        };
        this.handleTouchStart = (e) => {
            this.initialScrollX = e.nativeEvent.pageX;
            this.currentScrollX = this.scrollView.scrollLeft;
            this.initialScrollXTime = Date.now();
        };
        this.handleTouchEnd = (e) => {
            const dx = this.initialScrollX - e.nativeEvent.pageX;
            const vx = dx / (this.initialScrollXTime - Date.now());
            if (dx > 80 || vx < -0.3) {
                this.goToNext();
            }
            else if (dx < -80 || vx > 0.3) {
                this.goToPrev();
            }
            else {
                this.goToOrigin();
            }
        };
        this.handleTouchMove = (e) => {
            const dx = this.initialScrollX - e.nativeEvent.pageX;
            const scrollX = this.currentScrollX + dx;
            this.scrollView.scrollTo({
                x: scrollX,
                y: 0
            });
        };
        this.renderSingle = () => {
            if (!this.props.items || !this.props.items.length) {
                return null;
            }
            return (<View style={[{ alignItems: 'center' }, this.props.style]} onLayout={this.handleContainerSizeChange}>
        <View style={[{ width: this.state.itemWidth }, this.props.itemStyle]}>
          {this.props.renderItem(this.props.items[0], 0)}
        </View>
      </View>);
        };
        this._saveScrollViewRef = (ref) => this.scrollView = ref;
        this.state = {
            currentIndex: 0,
            containerWidth: 0,
            itemWidth: 0
        };
    }
    render() {
        const snapToInterval = this.state.itemWidth *
            (this.props.itemsPerPage || this.defaultItemsPerPage);
        const pageNum = this.getPageNum();
        if (this.props.items.length <= 1) {
            return this.renderSingle();
        }
        return (<Animated.View style={[
            this.props.style,
            { opacity: this.opcacity, overflow: 'hidden' }
        ]}>
        <ScrollViewCopy className='carousel-scroll-view' onLayout={this.handleContainerSizeChange} horizontal={true} ref={this._saveScrollViewRef} decelerationRate={0} snapToAlignment={'start'} snapToInterval={snapToInterval} showsHorizontalScrollIndicator={false} onTouchStart={this.handleTouchStart} onTouchEnd={this.handleTouchEnd} onTouchMove={this.handleTouchMove}>
          <View style={{ width: this.props.centerMode ? this.props.peekSize : 0 }}/>
          {this.props.items.map((item, i) => {
            return (<View key={i} style={[
                {
                    width: this.state.itemWidth
                },
                this.props.itemStyle
            ]}>
                {this.props.renderItem(item, i)}
              </View>);
        })}
        </ScrollViewCopy>

        {this.props.renderPageIndicator ? (this.props.renderPageIndicator(this.state.currentIndex, this.props.items.length)) : (<PageIndicator style={this.props.pageIndicatorStyle} currentIndex={this.state.currentIndex} itemsCount={pageNum} dotStyle={this.props.dotStyle} dotActiveStyle={this.props.dotActiveStyle}/>)}

        {this.state.currentIndex !== 0 &&
            !!this.props.showArrow && (<TouchableOpacity style={S.goToPrev} onPress={this.goToPrev}>
              <View style={S.buttonPrevIcon}/>
            </TouchableOpacity>)}

        {this.state.currentIndex !== pageNum - 1 &&
            !!this.props.showArrow && (<TouchableOpacity style={S.goToNext} onPress={this.goToNext}>
              <View style={S.buttonNextIcon}/>
            </TouchableOpacity>)}

        <style>
          
          {`.carousel-scroll-view {
          overflow: hidden
        }`}
        </style>
      </Animated.View>);
    }
}
//# sourceMappingURL=MultiCarousel.web.js.map