'use strict';

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

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

export default class DoubleImage extends React.Component {

    constructor(props) {
        super (props);
    }

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

    render() {

        let {resource} = this.props;
        if (!resource) {
            return (<View style={{height:0,width:width,backgroundColor:'white'}}/>);
        }

        let list = resource.get('module_data').get('data').toJS();
        let properties = resource.get('module_data').get('properties').toJS();
        let isModuleMargin = properties.isModuleMargin;
        let backgroundHeight =isModuleMargin=='1'?(width/2+10):width/2;
        let moduleOrder = resource.get('module_order') + 1;
        let moduleType = resource.get('module_type');
        let yh_exposureData = this.props.yh_exposureData?this.props.yh_exposureData:null;
        return (
            <View style={{flexDirection: 'row',width: width,height: backgroundHeight,backgroundColor:'#f0f0f0'}}>
            {list.map((data, i) => {
                let backgroundImage = data.pic?data.pic:''; //YH_Image.getSlicedUrl(data.pic, width/2, height/2, 2);
                let linkType = data.linkType;
                let showProductInfo = data.showProductInfo?data.showProductInfo:false;
                let product = data.product;
                if (!product) {
                    showProductInfo = false;
                }
                let salePrice = product?parseFloat(product.sales_price):0;
                let originPrice = product?parseFloat(product.market_price):0;
                let name = product?product.product_name:'';
                let price = '¥' + salePrice.toFixed(2);
                let sale = '¥' + originPrice.toFixed(2);
                let saleAble = false;//salePrice>0?true:false;
                let linkReource = data.resource;
                let title = data.text?data.text:'';
                let url = '';
                if (linkType == '0') {
                    url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.poollist","params":{"productPool":"${linkReource}","title":"${title}"}}`;
                } else if (linkType == '1') {
                    url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.productDetail","params":{"product_skn":"${linkReource}","from_page_name":"${Platform.OS === 'ios'?'iFP_RedPersonBrand':'aFP_RedPersonBrand'}","from_page_param":"${yh_exposureData?yh_exposureData.P_PARAM:null}"}}`;
                } else if (linkType == '2') {
                    url = linkReource;
                }
                let new_yh_exposureData = null;
                if (yh_exposureData) {
                    new_yh_exposureData = {
                        I_INDEX: i,
                        ACTION_URL: url,
                        ...yh_exposureData,
                    }
                }
                return (
                    <TouchableOpacity key={'row'+i} yh_exposureData={new_yh_exposureData} activeOpacity={1.0} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(url,moduleOrder,moduleType,i+1)}} >
                        <YH_Image
                            url={backgroundImage}
                            style={styles.thumbnail}
                        ></YH_Image>
                        {linkType=='1'&& showProductInfo ?<View style={styles.titleView}>
    						<Text style={styles.title} numberOfLines={1}>{name}</Text>
                            <View style={styles.saleView}>
                                <Text style={{marginTop: 2,marginLeft: 10,fontSize: 11,backgroundColor: 'transparent',color: saleAble?'red':'white',}}>{price}</Text>
                                {saleAble?<Text style={styles.deleteSale}>{sale}</Text>:null}
                            </View>
    					</View>:null}
                    </TouchableOpacity>
                )

            })}
            </View>
        )
    }
}

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

let styles = StyleSheet.create({
    titleView: {
        width: width/2,
        height: 45,
        position: 'absolute',
        backgroundColor: 'rgba(0,0,0,0.3)',
        top: width/2-45,
    },
    thumbnail: {
        width: width/2,
        height: width/2,
        backgroundColor: '#f5f7f6',
        resizeMode: 'contain',
    },
    title: {
        marginTop: 8,
        marginLeft: 10,
        width: width/2-20,
        fontSize: 11,
        backgroundColor: 'transparent',
        color: 'white',
        fontWeight: 'bold',
    },
    saleView:{
		flexDirection: 'row',
    },
    deleteSale: {
        marginLeft: 2,
        marginTop: 4,
        fontSize: 10,
        backgroundColor: 'transparent',
        color: 'white',
        textDecorationLine: 'line-through',
    }
});