import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Image, ScrollView, ImageBackground,Platform, BackHandler, FlatList} from 'react-native';
import { connect } from 'react-redux';
import { IsIos, Foundation } from '../common';
class CommonBanner extends React.Component {

    static navigationOptions = {
        title: '',     
    };

    constructor(props) {
        super(props);
        this.state={
            sliderIndex: 0,
            maxSlider: this.props.maxSlider,
            bannerList:this.props.bannerList,
            
        }
    }

     setRef = (c) => {
        this.listRef = c;
      }
      
      scrollToIndex = (index, animated) => {
        this.listRef && this.listRef.scrollToIndex({ index, animated })
      }
      componentWillReceiveProps(nextProps){
          if(this.props.bannerList != nextProps.bannerList || this.props.maxSlider != nextProps.maxSlider){
              this.setState({
                bannerList:nextProps.bannerList,
                maxSlider: nextProps.maxSlider
              })
          }
      }

      intervalId = -1;
    componentDidMount() {
        this.setTimeOutRepeat()
    }

    isUnMounted = false;
    setTimeOutRepeat = () => {
        setTimeout(() => {
            const { sliderIndex, maxSlider } = this.state
            let nextIndex = 0
        
            if (sliderIndex < maxSlider - 3) {
              nextIndex = sliderIndex + 1
            }else{
                nextIndex = 0;
            }
        
            this.scrollToIndex(nextIndex, true)
            this.setState({sliderIndex: nextIndex})
            if(!this.isUnMounted){
                this.setTimeOutRepeat();
            }
        },2000);
    }

    componentWillUnmount(){
        this.isUnMounted = true;
        if (this.intervalId != -1){
            clearInterval(this.intervalId)
        }
    }

    render() {
        return (
            <View style={styles.two_line}>
                <FlatList
                ref={this.setRef}
                data={this.state.bannerList}
                showsVerticalScrollIndicator={false}
                pagingEnabled
                keyExtractor={(item,index) => index.toString()}
                style={{height:IsIos? 140 : 150,paddingBottom:5}}
                renderItem={({item, i}) => (
                    <View key={i} style={{paddingVertical:(this.props.bannertype == 1) ? 9 : 10,flexDirection:'row',justifyContent:'space-between',alignItems:'center',width:'100%'}}>
                        <Image style={{width:26,height:26,borderRadius:13}} source={{uri:Foundation.trim(item.thumb)}}/> 
                            <View style={{flexDirection:'row',width:'90%',marginLeft:5,alignItems:'center'}}>
                                <Text style={{color:'#333333',fontSize:12,lineHeight:13}}>{item.itemName}</Text>
                                <Text style={{color:'#333333',fontSize:12,marginLeft:5,lineHeight:13}}>{item.targetPageUrl} </Text>
                                <Text style={{color:'#FF0000',fontSize:12,lineHeight:13}}>{item.targetPageTitle}</Text>
                            </View>
                    </View>
                )}
            />
            </View>
        );
    }
}

select = (state) => {
    return state.user
}

export default connect(select)(CommonBanner);

const styles = StyleSheet.create({
    item_container: {
        flex: 1,
        backgroundColor: '#FFFFFF',
        alignItems:'center'
    },
    two_line: {
        width:'100%'-20,
        marginLeft:10,
        marginRight:10
    },
    small_icon:{
        width:30,
        height:30
    }
});