import React, {Component } from 'react'
import {View, StyleSheet, Text, Dimensions,TouchableOpacity} from 'react-native';
import Immutable, {Map} from 'immutable';
import YH_Image from '../../../common/components/YH_Image';

export default class TripleImageRectangle extends Component{
  constructor(props) {
    super(props);
  }

  shouldComponentUpdate(nextProps){
      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 displayType = properties.displayType;
    if (!displayType) {
        return (<View style={{height:0,width:width,backgroundColor:'red'}}/>);
    };
	let yh_exposureData = this.props.yh_exposureData?this.props.yh_exposureData:null;
    let moduleOrder = resource.get('module_order') + 1;
    let moduleType = resource.get('module_type');
	let showProductInfo = true;
	list.map((data, i) => {
		let showProductInfoItem = data.showProductInfo?data.showProductInfo:false;
	    let product = data.product;
	    if (!product) {
	        showProductInfoItem= false;
	    }
		if (!showProductInfoItem) {
			showProductInfo = false;
		}
	});
	return (
		<View style={{flexDirection: 'row',width:width,height: isModuleMargin=='1'?containerHeigth+nullHeigth:containerHeigth,backgroundColor: '#f0f0f0'}}>
		{list.map((data, i) => {
			let backgroundImage = data?data.pic:'';
		    let linkType = data.linkType;
		    let product = data.product;
		    let title = data.text?data.text:'';
		    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 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}"}}`;
		    } 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 yh_exposureData={new_yh_exposureData} key={'row' + i} activeOpacity={1.0} style={styles.imagetype} onPress={() => {this.props.onPressProduct && this.props.onPressProduct(url,moduleOrder,moduleType,i+1)}} >
					<YH_Image url={backgroundImage} style={[styles.imagetype,{resizeMode: 'contain'}]}/>
					{linkType=='1' && showProductInfo ?<View style={styles.maskContainer}>
						<Text style={styles.titleText} 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 containerHeigth = Math.ceil((333/750)*width);
let maskHeight = 30;
let nullHeigth = 10;

let styles = StyleSheet.create({
    maskContainer: {
        position: 'absolute',
        width: width/3,
        height: 40,
        backgroundColor: 'rgba(0,0,0,0.3)',
        top: containerHeigth-40,
    },
    imagetype:{
        width:width/3,
        height:containerHeigth,
        backgroundColor: '#f5f7f6',
    },
    titleText: {
        width:width/3 -10,
        height:maskHeight / 2,
        color: 'white',
        marginLeft: 10,
        fontSize: 11,
        textAlign :'left',
        marginTop: 4,
        fontWeight: 'bold',
    },
    deleteSale: {
        marginLeft: 2,
        marginTop: 4,
        fontSize: 11,
        backgroundColor: 'transparent',
        color: 'white',
        textDecorationLine: 'line-through',
    },

    saleView:{
		flexDirection: 'row',
    },
});