'use strict';

import React from 'react';
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';
import Immutable, {Map} from 'immutable';

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

export default class ListBannerSwiper extends React.Component {

    constructor(props) {
        super (props);
    }

    render() {
        let {resource} = this.props;

        return (
            <View style={styles.container}>
                <YH_Swiper
                    style={styles.banner}
                    showsButtons={false}
                    loop={true}
                    autoplay={true}
                    autoplayTimeout={2}
                    width={width}
                    height={height}
                    paginationStyle={{
                       backgroundColor: 'rgba(0,0,0,0.2)',
                       bottom: 10,
                       height: 10,
                       width:(Platform.OS === 'ios')?resource.length * 12: resource.length * 12 + 5,
                       borderRadius: 5,
                       marginLeft: (width-resource.length * 12)/2,
                       paddingBottom: 3,
                   }}
                >
                  {resource.map((item, i) => {
                      return (
                          <TouchableOpacity
                              key={i}
                              activeOpacity={1}
                              onPress={() => {
                              this.props.onPressBanner && this.props.onPressBanner(item.url, i);
                              }}
                          >
                              <SlicedImage source={{uri: item.src}} style={{width, height}}/>
                          </TouchableOpacity>
                      );
                  })}
                </YH_Swiper>
            </View>
        );
    }
}

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

let styles = StyleSheet.create({

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

});