'use strict';

import React from 'react';
import ReactNative from 'react-native';
import Swiper from 'react-native-swiper';
import ImmutablePropTypes from 'react-immutable-proptypes';
import SlicedImage from '../../../common/components/SlicedImage';
import Immutable, {Map} from 'immutable';
import GlobalTopHeader from './GlobalTopHeader';

const {
    View,
    Image,
    TouchableOpacity,
    StyleSheet,
    Dimensions,
    Platform,
} = ReactNative;

export default class GlobalHomeSwiper extends React.Component {

    constructor(props) {
        super (props);

        this.dot = <View
            style={{
                backgroundColor:'rgba(0,0,0,.2)',
                width: 6,
                height: 6,
                borderRadius: 3,
                marginLeft: 3,
                marginRight: 3,
                marginTop: (Platform.OS === 'ios')?3:23,
                marginBottom: 0,
            }}
        />;
        this.activeDot = <View
            style={{
                backgroundColor:'white',
                width: 6,
                height: 6,
                borderRadius: 3,
                marginLeft: 3,
                marginRight: 3,
                marginTop: 3,
                marginBottom: 0,
            }}
        />;
    }

    shouldComponentUpdate(nextProps){

		if (Immutable.is(nextProps.resource, this.props.resource)) {
            return false;
		} else {
            return true;
		}
	}


    render() {

        let {resource} = this.props;
        let res = resource.toJS();
        let list = res.data;

        if (!list) {
			return null;
		}

        if (list.length == 1) {
            return (
                <View style={styles.container}>
                    <GlobalTopHeader />
                    <TouchableOpacity
                        activeOpacity={1}
                        style={{width: width, height: height}}
                        onPress={() => {
                            // this.props.onPressSlideItem && this.props.onPressSlideItem(data[0].url);
                        }}
                    >
                        <SlicedImage source={{uri: list[0].src}} style={width, height}/>
                    </TouchableOpacity>
                </View>
            );
        } else {
            return (
                <View style={styles.container}>
                    <GlobalTopHeader />
                    <Swiper
                        style={styles.banner}
                        showsButtons={false}
                        loop={true}
                        autoplay={true}
                        autoplayTimeout={2}
                        paginationStyle={{bottom: 8}}
                        dot={this.dot}
                        activeDot={(Platform.OS === 'ios')?this.activeDot:null}
                        width={width}
                        height={height}
                    >
                        {list.map((item, i) => {
                            return (
                                <TouchableOpacity
                                    key={i}
                                    activeOpacity={1}
                                    onPress={() => {
     		                            this.props.onPressSlideItem && this.props.onPressSlideItem(item.url);
                                    }}
                                >
                                    <SlicedImage source={{uri: item.src}} style={{width, height}}/>
                                </TouchableOpacity>
                            );
                        })}
                    </Swiper>
                </View>
            );
        }
    }
}

let {width} = Dimensions.get('window');
let height = Math.ceil((310 / 640) * width) + 40;

let styles = StyleSheet.create({

    container: {
        width: width,
        height: height,
        backgroundColor:'#f0f0f0',
    },
    banner: {

    },

});