'use strict';

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

const {
    TouchableOpacity,
    Dimensions,
    View
} = ReactNative;

export default class ImageFour extends React.Component {

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

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

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

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

        if (!resource || resource.size === 0) {
            return null;
        }

        let data = this.props.resource.toJS();
        let list = data && data.list;
        if (!list || list.length === 0) {
            return null;
        }
        let sliderWidth = width / 4;
        let sliderHeight = 105 * DEVICE_WIDTH_RATIO;
        return (
            <View style={{flexDirection: 'row'}}>{
                list.map((item, i) => {
                    let imageUrl = YH_Image.getSlicedUrl(item.src, sliderWidth, sliderHeight, 2);
                    return (
                        <TouchableOpacity
                            key={i}
                            activeOpacity={1}
                            yh_exposureData={item.yh_exposureData}
                            style={{ width: sliderWidth, height: sliderHeight }}
                            onPress={() => {
                                this._handleParamsJumpWithUrl(i + 1, item.url);
                            }}
                        >
                            <YH_Image
                                url={imageUrl}
                                style={{ width: sliderWidth, height: sliderHeight }}
                            />
                        </TouchableOpacity>
                    );
                })
            }
            </View>
        );
    }
}

let {width} = Dimensions.get('window');

const DEVICE_WIDTH_RATIO = width / 375;