import React, { Component } from 'react';
import { Animated, FlatList, Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
import { PageIndicator } from '../PageIndicator';
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.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) => {
            options = options || { animated: true };
            if (!this.scrollView) {
                return;
            }
            if (this.scrollView.current) {
                this.scrollView.current.scrollToOffset({
                    offset: index * this.getPageWidth(),
                    animated: options.animated
                });
            }
            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.handleScrollRelease = (e) => {
            if (Platform.OS !== 'android') {
                return;
            }
            const diffX = e.nativeEvent.contentOffset.x - this.initialScrollX;
            if (diffX > 80 || e.nativeEvent.velocity.x < -0.5) {
                this.goToNext();
            }
            else if (diffX < -80 || e.nativeEvent.velocity.x > 0.5) {
                this.goToPrev();
            }
            else {
                this.goToOrigin();
            }
        };
        this.handleScrollBegin = (e) => {
            if (Platform.OS !== 'android') {
                return;
            }
            this.initialScrollX = e.nativeEvent.contentOffset.x;
        };
        this.handleMomentumScrollEnd = (e) => {
            if (Platform.OS !== 'ios') {
                return;
            }
            const offset = e.nativeEvent.contentOffset.x < 0 ? 0 : e.nativeEvent.contentOffset.x;
            const pageWidth = this.getPageWidth();
            const pageNum = this.getPageNum();
            const nextIndex = offset > pageWidth * (pageNum - 2) ? pageNum - 1 : Math.floor(offset / pageWidth);
            this.setState({ currentIndex: nextIndex });
            if (this.props.onSlideChange) {
                this.props.onSlideChange({
                    currentIndex: this.state.currentIndex,
                    nextIndex
                });
            }
        };
        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.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.renderItem = ({ item, index }) => {
            return (<View key={index} style={[{ width: this.state.itemWidth }, this.props.itemStyle]}>
        {this.props.renderItem(item, index)}
      </View>);
        };
        this.keyExtractor = (item, index) => {
            if (this.props.keyExtractor) {
                return this.props.keyExtractor(item, index);
            }
            const testItem = item;
            return testItem.key || testItem.id || '' + index;
        };
        if (props.peekSize && !Number.isInteger(props.peekSize * 2)) {
            console.error(`MultiCarousel: (peekSize * 2) must be an integer but got (${props.peekSize} * 2)`);
        }
        this.scrollView = React.createRef();
        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' }]}>
        <FlatList onLayout={this.handleContainerSizeChange} horizontal={true} ref={this.scrollView} decelerationRate={0} snapToAlignment={'start'} snapToInterval={snapToInterval} showsHorizontalScrollIndicator={false} onMomentumScrollEnd={this.handleMomentumScrollEnd} onScrollEndDrag={this.handleScrollRelease} onScrollBeginDrag={this.handleScrollBegin} data={this.props.items} renderItem={this.renderItem} keyExtractor={this.keyExtractor}/>

        {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>)}
      </Animated.View>);
    }
}
//# sourceMappingURL=MultiCarousel.js.map