'use strict';

import React from 'react';
import ReactNative from 'react-native';
import YH_Swiper from '../../../common/components/YH_Swiper';
import YH_Image from '../../../common/components/YH_Image';
import Immutable from 'immutable';

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

export default class ImageSlider extends React.Component {

    constructor(props) {
        super(props);
        this._handleParamsJumpWithUrl = this._handleParamsJumpWithUrl.bind(this);
    }

    shouldComponentUpdate(nextProps) {
        if (Immutable.is(nextProps.resource, this.props.resource)
            && nextProps.sliderWidth == this.props.sliderWidth
            && nextProps.sliderHeight == this.props.sliderHeight) {
            return false;
        } else {
            return true;
        }
    }

    _handleParamsJumpWithUrl(index, url) {
        // 为埋点提供参数组装
        // 后期请将所有的点击事件由 resourceJumpWithUrl 修改为自己独有的事件
        // 由于多数组件都使用的 resourceJumpWithUrl ，埋点传参无法正常进行
        let params = {
            I_INDEX: index,
            F_URL: url
        };
        this.props.resourceJumpWithUrl && this.props.resourceJumpWithUrl(url, 'banner', params);
    }

    render() {

        let {resource, sliderWidth, sliderHeight} = this.props;
        if (!resource || resource.size == 0) {
            return null;
        }

        let data = this.props.resource.toJS();
        if (data.length == 1) {
            let imageUrl = YH_Image.getSlicedUrl(data[0].src, sliderWidth, sliderHeight, 2);
            return (
                <TouchableOpacity
                    activeOpacity={1}
                    yh_exposureData={data[0].yh_exposureData}
                    style={{width: sliderWidth, height: sliderHeight}}
                    onPress={() => {
                        this._handleParamsJumpWithUrl(1, data[0].url)
                    }}
                >
                    <YH_Image
                        url={imageUrl}
                        style={{width: sliderWidth, height: sliderHeight}}
                    />
                </TouchableOpacity>
            );
        } else {
            return (
                <YH_Swiper
                    showsButtons={false}
                    loop={true}
                    autoplay={true}
                    autoplayTimeout={8}
                    width={sliderWidth}
                    height={sliderHeight}
                    paginationStyle={{
                        backgroundColor: 'rgba(68, 68, 68, 0.2)',
                        bottom: 10,
                        height: 10,
                        width: data.length * 12,
                        borderRadius: 5,
                        marginLeft: (sliderWidth - data.length * 12) / 2,
                        paddingBottom: 0,
                    }}
                >
                    {data.map((item, i) => {
                        let imageUrl = YH_Image.getSlicedUrl(item.src, sliderWidth, sliderHeight, 2);
                        return (
                            <TouchableOpacity
                                key={i}
                                activeOpacity={1}
                                yh_exposureData={item.yh_exposureData}
                                onPress={() => {
                                    this._handleParamsJumpWithUrl(i + 1, item.url);
                                }}
                            >
                                <YH_Image
                                    url={imageUrl}
                                    style={{width: sliderWidth, height: sliderHeight}}
                                />
                            </TouchableOpacity>
                        );
                    })}
                </YH_Swiper>
            );
        }
    }
}