'use strict';

import React from 'react';
import PropTypes from 'prop-types';
import ReactNative from 'react-native';
import YH_Swiper from '../../../common/components/YH_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: 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();

        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'));
                            }}
                        >
                            <SlicedImage source={{uri: item.get('src')}} style={{width, height}}/>
                        </TouchableOpacity>
                    );
                })}
            </YH_Swiper>
        );
    }
}

let styles = StyleSheet.create({
    banner: {

    },
});