'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,
} = 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 (
            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={() => {
                            // if (i === 2) {
                            //     this.props.jumpWithUrl && this.props.jumpWithUrl('达人排行', 'talentRank');
                            // } else {
                            this._handleParamsJumpWithUrl(i + 1, item.url);
                            
                            // }
                            // this.props.jumpWithUrl && this.props.jumpWithUrl('商品详情', 'shareDetail');
                            // let url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.minealliance","params":{"favType":"0", "type":"recommendProduct", "title":"商品", "src":"http://img10.static.yhbimg.com/yhb-img01/2018/08/08/21/01479a3a579091b1c198d2884f3a80b08c.png?imageView2/{mode}/w/{width}/h/{height}", "productPool":"680" }}`;
                            // ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);

                            // this.props.jumpWithUrl && this.props.jumpWithUrl('商品详情', 'recommendProduct');
                        }}
                    >
                        <YH_Image
                            url={imageUrl}
                            style={{width: sliderWidth, height: sliderHeight}}
                        />
                    </TouchableOpacity>
                );
            })
        );
    }
}

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

const DEVICE_WIDTH_RATIO = width / 375;