'use strict';

import React from 'react-native';

import GuideItem from './GuideItem';
import PageControl from './PageControl';

let {
    Component,
    View,
    ScrollView,
    Text,
    Platform,
    Dimensions,
    ViewPagerAndroid
} = React;

export default class Guide extends Component {

    constructor(props) {
        super(props);
        
        this.state = {
            currentPage: 0,
            containerWidth: Dimensions.get('window').width,
        };

        this.onLayout = this.onLayout.bind(this);
        this.updateSelectedPage = this.updateSelectedPage.bind(this);
    }

    onLayout(e) {
        const { width, } = e.nativeEvent.layout;

        if (width !== this.state.containerWidth) {
            this.setState({ 
                containerWidth: width, 
            });
        }
    }

    updateSelectedPage(currentPage) {
        let localCurrentPage = currentPage;
        
        if (typeof localCurrentPage === 'object') {
            localCurrentPage = currentPage.nativeEvent.position;
        }

        this.setState({
            currentPage: localCurrentPage, 
        });
    }

    renderGuide() {
        if (Platform.OS === 'ios') {
            return (
                <ScrollView
                    automaticallyAdjustContentInsets={false}
                    horizontal={true}
                    pagingEnabled={true}
                    showsHorizontalScrollIndicator={false}
                    onMomentumScrollEnd={(e) => {
                        const offsetX = e.nativeEvent.contentOffset.x;
                        const page = Math.round(offsetX / this.state.containerWidth);
                        if (this.state.currentPage !== page) {
                            this.updateSelectedPage(page);
                        }
                    }}>
                    
                    {/*<GuideItem uri={'guide1'} text={'客源多多，免费开店'} />
                    <GuideItem uri={'guide2'} text={'店铺随身管，实时查看数据'} />
                    <GuideItem uri={'guide3'} text={'各种工具，玩转销售'} buttonText={'立即使用'} />*/}

                    {this.props.items.map((item, i) => {
                        return <GuideItem key={i} uri={item.uri} text={item.text} buttonText={item.buttonText} onPress={item.onPress} />;
                    })}
                    
                </ScrollView>
            );
        } else {
            return (
                <ViewPagerAndroid
                    initialPage={this.state.currentPage}
                    onPageSelected={this.updateSelectedPage}
                    keyboardDismissMode="on-drag">

                    {this.props.items.map((item, i) => {
                        return <GuideItem key={i} uri={item.uri} text={item.text} buttonText={item.buttonText} onPress={item.onPress} />;
                    })}

                </ViewPagerAndroid>
            );
        }
    }

	render() {

        let pageTop = Dimensions.get('window').height - 27;
        if (Platform.OS === 'android') {
            pageTop -= 30;
        }

        return (
            <View onLayout={this.onLayout}>

                {this.renderGuide()}	

                <PageControl style={{position:'absolute', left:0, right:0, top: pageTop}}
                    numberOfPages={this.props.items.length}
                    currentPage={this.state.currentPage}
                    hidesForSinglePage={true}
                    pageIndicatorTintColor='gray'
                    currentPageIndicatorTintColor='white'
                    indicatorStyle={{borderRadius: 5}} 
                    currentIndicatorStyle={{borderRadius: 5}}
                    indicatorSize={{width:8, height:8}}/>
                
            </View>
        );
    }
}