import React, { Component } from 'react'

import { Text, StyleSheet, View, Button ,TouchableOpacity,Alert,ScrollView,Image} from 'react-native'

import { createStackNavigator, createAppContainer } from 'react-navigation';

let Dimensions = require('Dimensions');

let {width, height} = Dimensions.get('window');

export default class HomeScreen extends Component {

  static navigationOptions = {

    title: 'HomeScreen'

  }

  //defaultProps

  static defaultProps = {

      //每隔多少秒执行一次

      duration:2000

  }

  componentDidMount(){

    // 开启定时器

    this.startTime();

  }

  // 开启定时器

  startTime(){

        // 1.拿到scrollerView

        let scrollerView = this.refs.scrollerView;

        let imageCount = 4;

        // 2.添加定时器

        // 2.1 设置圆点

        let activePage = 0;

        this.timer = setInterval(() => {

            // 2.2 判断

            if((this.state.currentPage+1) >= imageCount){

                activePage = 0;

            }else {

                activePage = this.state.currentPage+1;

            }

            // 2.3 更新状态机

            this.setState({

                // 当前页

                currentPage: activePage

            })

            // 2.4 让scrollerVeiw滚动起来

            let offsetX = activePage * width;

            scrollerView.scrollTo({x: offsetX, y:0, animated:true});

        }, this.props.duration);

    }

  constructor(props){

    super(props);

    this.state = {

      currentPage:0

    }

    this.renderPageIndex = this.renderPageIndex.bind(this);

  }

  renderChildView(){

    var allChild = [];

    var imgNames = [require('./img/leading_01.png'),

                    require('./img/leading_02.png'),

                    require('./img/leading_03.png'),

                    require('./img/leading_04.png')];

    imgNames.forEach((item,index)=>{

      allChild.push(

        <Image

        style={{width: 375,height: 375}}

        source={item}

        />

      )

    })

    return allChild;

  }

  // 返回页面指示器的圆点

  renderPageIndex(){

        // 数组

        let indicatorArr = [];

        //拿到图形数组

        //let imageArrs = ImageData.data;

        //样式

        var style;

        //遍历

        for (var i = 0; i < 4; i++){

            // 判断

            style = (i==this.state.currentPage) ? {color: 'orange'} : {color: '#E8E8E8'}

            //放入圆点

            indicatorArr.push(

                // 多个样式使用[]数组来放

                <Text key={i} style={[{fontSize:25}, style]}>•</Text>

            );

        }

        //返回

        return indicatorArr;

    }

  // 当一帧滚动结束的时候调用

  onAnimationEnd(e){

      // 1.求出水平方向的偏移量

      var offsetX = e.nativeEvent.contentOffset.x;

      // 2.求出当前的页数         floor函数 取整

      var currentPage = Math.floor(offsetX / width);

      // 3.更新状态机

      this.setState({

          // 当前页

          currentPage: currentPage

      })

  }

  // 开始拖拽时调用

  onScrollerBeginDrag(){

      // 停止定时器

      clearInterval(this.timer);

  }

  // 停止拖拽时调用

  onScrollEndDrag(){

      // 开启定时器

      this.startTime();

  }

  render(){

    return(

      <View style={styles.circulateViewStyle}>

        <ScrollView

        ref="scrollerView"

        horizontal={true}

        pagingEnabled={true}

        scrollEnabled={true}

        //滚动动画结束时调用此函数

        onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)}

        //开始拖拽

        onScrollBeginDrag={(e)=>this.onScrollerBeginDrag(e)}

        //停止拖拽

        onScrollEndDrag={(e)=>this.onScrollEndDrag(e)}

        >

          {this.renderChildView()}

        </ScrollView>

        {/*底部页面指示器*/}

        <View style={styles.pageViewStyle}>

            {/*返回5个圆点*/}

            {this.renderPageIndex()}

        </View>

      </View>

    );

  }

const styles = StyleSheet.create({

    circulateViewStyle: {

        marginTop:20,

        height:150,

        width:width,

    },

    scrollViewStyle:{

    },

    imageStyle: {

        width: width,

        height: 150

    },

    pageViewStyle: {

        width:width,

        height:25,

        backgroundColor:'rgba(0, 0, 0, 0.4)',

        position:'absolute',

        bottom:0,

        flexDirection:'row',

        alignItems:'center'

    }

});