'use strict';

import React from 'react';
import ReactNative from 'react-native';
import YH_Swiper from './YH_Swiper';
import ImmutablePropTypes from 'react-immutable-proptypes';
import SlicedImage from './SlicedImage';
import Platform from 'react-native';
import PropTypes from 'prop-types';
const {
    View,
    Image,
    TouchableOpacity,
    StyleSheet,
    Dimensions,
} = ReactNative;

export default class Banner extends React.Component {

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

    constructor(props) {
        super (props);
    }

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

        if (data.length == 1) {
            let item = data[0];
            return (
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={() => {
                        this.props.onPress && this.props.onPress(item.get('url'), 0);
                    }}
                >
                    <SlicedImage source={{uri: item.get('src')}} style={{width, height}}/>
                </TouchableOpacity>
            );
        } else {
            return (
                <YH_Swiper
                    style={styles.banner}
                    showsButtons={false}
                    loop={true}
                    autoplay={true}
                    autoplayTimeout={this.props.duration}
                    paginationStyle={{bottom: 8}}
                    height={height}
                >
                    {data.map((item, i) => {
                        return (
                            <TouchableOpacity
                                key={i}
                                activeOpacity={1}
                                onPress={() => {
                                    this.props.onPress && this.props.onPress(item.get('url'), i);
                                }}
                            >
                                <SlicedImage source={{uri: item.get('src')}} style={{width, height}}/>
                            </TouchableOpacity>
                        );
                    })}
                </YH_Swiper>
            );
        }
    }
}

let styles = StyleSheet.create({
    banner: {

    },
});