'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';

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

export default class Banner extends React.Component {

    static propTypes = {
        data: ImmutablePropTypes.listOf(
            ImmutablePropTypes.contains({
                src: React.PropTypes.string.isRequired,
                url: React.PropTypes.string.isRequired,
            })
        ),
        duration: React.PropTypes.number,
        width: React.PropTypes.number.isRequired,
        height: React.PropTypes.number.isRequired,
        onPress: React.PropTypes.func,
    };

    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: 3,
                marginBottom: 3,
            }}
        />;
        this.activeDot = <View
            style={{
                backgroundColor:'white',
                width: 6,
                height: 6,
                borderRadius: 3,
                marginLeft: 3,
                marginRight: 3,
                marginTop: 3,
                marginBottom: 3,
            }}
        />;
    }

    render() {
        let width = this.props.width;
        let height = this.props.height;
        let data = this.props.data.toArray();

        return (
            <Swiper
                style={styles.banner}
                showsButtons={false}
                loop={true}
                autoplay={true}
                autoplayTimeout={this.props.duration}
                paginationStyle={{bottom: 8}}
                dot={this.dot}
                activeDot={this.activeDot}
                height={height}
            >
                {data.map((item, i) => {
                    return (
                        <TouchableOpacity
                            key={i}
                            activeOpacity={1}
                            onPress={() => {
                                this.props.onPress && this.props.onPress();
                            }}
                        >
                            <SlicedImage source={{uri: item.get('src')}} style={{width, height}}/>
                        </TouchableOpacity>
                    );
                })}
            </Swiper>
        );
    }
}

let styles = StyleSheet.create({
    banner: {

    },
});