'use strict';

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

const {
    View,
    TouchableOpacity,
    Dimensions,
} = ReactNative;

export default class ImageTwo 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, name, url, i_index, clickData) {
        // 为埋点提供参数组装 
        // 后期请将所有的点击事件由 resourceJumpWithUrl 修改为自己独有的事件
        // 由于多数组件都使用的 resourceJumpWithUrl ，埋点传参无法正常进行
        let params = {
            F_ID: id,
            F_NAME: name,
            F_URL: url,
            I_INDEX: i_index
        };
        if (clickData) {
            params = clickData;
        }
        this.props.resourceJumpWithUrl && this.props.resourceJumpWithUrl(url, 'two', params);
    }

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

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

        let data = resource.get('data').toJS();
        let list = data && data.list;
        console.log('four');
        console.log(list);
        if (!list || list.length === 0) {
            return null;
        }
        let sliderWidth = (width - 40) / 2;
        let sliderHeight = 120 * DEVICE_WIDTH_RATIO;
        return (
            <View style={{marginLeft: 15, marginRight: 15, marginBottom: 18, 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, marginRight:10}}
                            onPress={() => {
                                this._handleParamsJumpWithUrl(resource.get('template_id'), resource.get('template_name'), item.url, i + 1, item.yh_clickData);
                            }}
                        >
                            <YH_Image
                                url={imageUrl}
                                style={{width: sliderWidth, height: sliderHeight}}
                            />
                        </TouchableOpacity>
                    );
                })}
            </View>
        );
    }
}

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

const DEVICE_WIDTH_RATIO = width / 375;