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 TripleImageOneBigSide 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 data1 = list?list[0]:null;
    let backgroundImage1 = data1?data1.pic:'';
    let linkType1 = data1.linkType;
    let showProductInfo1 = data1.showProductInfo?data1.showProductInfo:false;
    let product1 = data1.product;
    if (!product1) {
        showProductInfo1 = false;
    }
    let title1 = data1.text?data1.text:'';
    let salePrice1 = product1?parseFloat(product1.sales_price):0;
    let originPrice1 = product1?parseFloat(product1.market_price):0;
    let name1 = product1?product1.product_name:'';
    let price1 = '¥' + salePrice1.toFixed(2);
    let sale1 = '¥' + originPrice1.toFixed(2);
    let saleAble1 = false;//salePrice1>0?true:false;
    let linkReource1 = data1.resource;

    let data2 = list?list[1]:null;
    let backgroundImage2 = data2.pic;
    let linkType2 = data2.linkType;
    let showProductInfo2 = data2.showProductInfo?data2.showProductInfo:false;
    let product2 = data2.product;
    if (!product2) {
        showProductInfo2 = false;
    }
    let title2 = data2.text?data2.text:'';
    let salePrice2 = product2?parseFloat(product2.sales_price):0;
    let originPrice2 = product2?parseFloat(product2.market_price):0;
    let name2 = product2?product2.product_name:'';
    let price2 = '¥' + salePrice2.toFixed(2);
    let sale2 = '¥' + originPrice2.toFixed(2);
    let saleAble2 = false;//salePrice2>0?true:false;
    let linkReource2 = data2.resource;

    let data3 = list?list[2]:null;
    let backgroundImage3 = data3.pic;
    let linkType3 = data3.linkType;
    let showProductInfo3 = data3.showProductInfo?data3.showProductInfo:false;
    let product3 = data3.product;
    if (!product3) {
        showProductInfo3 = false;
    }
    let showProductInfo = showProductInfo1 & showProductInfo2 & showProductInfo3;
    let title3 = data3.text?data3.text:'';
    let salePrice3 = product3?parseFloat(product3.sales_price):0;
    let originPrice3= product3?parseFloat(product3.market_price):0;
    let name3 = product3?product3.product_name:'';
    let price3 = '¥' + salePrice3.toFixed(2);
    let sale3 = '¥' + originPrice3.toFixed(2);
    let saleAble3 = false;//salePrice3>0?true:false;
    let linkReource3 = data3.resource;
    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;
    let yh_exposureData0 = null;
    let yh_exposureData1 = null;
    let yh_exposureData2 = null;


    let url1 = '';
    if (linkType1 == '0') {
        url1 = `http://m.yohobuy.com?openby:yohobuy={"action":"go.poollist","params":{"productPool":"${linkReource1}","title":"${title1}"}}`;
    } else if (linkType1 == '1') {
        url1 = `http://m.yohobuy.com?openby:yohobuy={"action":"go.productDetail","params":{"product_skn":"${linkReource1}"}}`;
    } else if (linkType1 == '2') {
        url1 = linkReource1;
    }
    if (yh_exposureData) {
        yh_exposureData0 = {
            I_INDEX: 0,
            ACTION_URL: url1,
            ...yh_exposureData,
        };
    }
    let url2 = '';
    if (linkType2 == '0') {
        url2 = `http://m.yohobuy.com?openby:yohobuy={"action":"go.poollist","params":{"productPool":"${linkReource2}","title":"${title2}"}}`;
    } else if (linkType2 == '1') {
        url2 = `http://m.yohobuy.com?openby:yohobuy={"action":"go.productDetail","params":{"product_skn":"${linkReource2}"}}`;
    } else if (linkType2 == '2') {
        url2 = linkReource2;
    }
    if (yh_exposureData) {
        yh_exposureData1 = {
            I_INDEX: 1,
            ACTION_URL: url2,
            ...yh_exposureData,
        };
    }

    let url3 = '';
    if (linkType3 == '0') {
        url3 = `http://m.yohobuy.com?openby:yohobuy={"action":"go.poollist","params":{"productPool":"${linkReource3}","title":"${title3}"}}`;
    } else if (linkType3 == '1') {
        url3 = `http://m.yohobuy.com?openby:yohobuy={"action":"go.productDetail","params":{"product_skn":"${linkReource3}"}}`;
    } else if (linkType3 == '2') {
        url3 = linkReource3;
    }
    if (yh_exposureData) {
        yh_exposureData2 = {
            I_INDEX: 2,
            ACTION_URL: url3,
            ...yh_exposureData,
        };
    }
    let actuallyHeight = isModuleMargin=='1'?containerHeigth+nullHeigth:containerHeigth;
    switch (displayType) {
        case '3':
            return (
              <View style={[styles.container,{height:actuallyHeight}]}>
                  <View style={styles.subContainer}>
                    <TouchableOpacity yh_exposureData={yh_exposureData0} activeOpacity={1.0} style={styles.image}
                    onPress={() => {this.props.onPressProduct && this.props.onPressProduct(url1,moduleOrder,moduleType,1)}} >
                          <YH_Image url={backgroundImage1} style={[styles.image,{resizeMode: 'cover'}]}/>
                          {linkType1=='1' && showProductInfo?<View style={styles.maskContainer1}>
                             <Text style={styles.titleText} numberOfLines={2}>{name1}</Text>
                             <View style={[styles.priceContainer,{marginRight: 10}]}>
                                 <Text style={[styles.price,{color: saleAble1?'red':'white'}]}>{price1}</Text>
                                  {saleAble1?<Text style={styles.deleteSale3}>{sale1}</Text>:null}
                              </View>
                         </View>:null}
                      </TouchableOpacity>
                      <TouchableOpacity yh_exposureData={yh_exposureData1} activeOpacity={1.0} style={styles.image}
                      onPress={() => {this.props.onPressProduct && this.props.onPressProduct(url2,moduleOrder,moduleType,2)}} >
                          <YH_Image url={backgroundImage2} style={[styles.image,{resizeMode: 'cover'}]}/>
                          {linkType2=='1' && showProductInfo?<View style={styles.maskContainer1}>
                             <Text style={styles.titleText} numberOfLines={2}>{name2}</Text>
                             <View style={[styles.priceContainer,{marginRight: 10}]}>
                                 <Text style={[styles.price,{color: saleAble2?'red':'white'}]}>{price2}</Text>
                                  {saleAble2?<Text style={styles.deleteSale3}>{sale2}</Text>:null}
                              </View>
                         </View>:null}
                      </TouchableOpacity>
                  </View>
                  <TouchableOpacity yh_exposureData={yh_exposureData2} activeOpacity={1.0} style={styles.imageBig}
                  onPress={() => {this.props.onPressProduct && this.props.onPressProduct(url3,moduleOrder,moduleType,3)}} >
                      <YH_Image url={backgroundImage3} style={[styles.imageBig,{resizeMode: 'cover'}]}/>
                      {linkType3=='1' && showProductInfo?<View style={styles.maskContainer2}>
                         <Text style={styles.titleText} numberOfLines={2}>{name3}</Text>
                         <View style={styles.priceContainer}>
                             <Text style={[styles.price,{color: saleAble3?'red':'white'}]}>{price3}</Text>
                              {saleAble3?<Text style={styles.deleteSale3}>{sale3}</Text>:null}
                          </View>
                     </View>:null}
                  </TouchableOpacity>
              </View>
            )
            break;
        case '4':
            return (
                <View style={[styles.container, {height:actuallyHeight}]}>
                    <TouchableOpacity yh_exposureData={yh_exposureData0} activeOpacity={1.0}
                    onPress={() => {this.props.onPressProduct && this.props.onPressProduct(url1,moduleOrder,moduleType,1)}} >
                        <View style={styles.subContainer}>
                              <YH_Image url={backgroundImage1} style={[styles.imageBig,{resizeMode: 'cover'}]}/>
                              {linkType1=='1' && showProductInfo?<View style={styles.maskContainer2}>
                                 <Text style={styles.titleText} numberOfLines={2}>{name1}</Text>
                                 <View style={styles.priceContainer}>
                                     <Text style={[styles.price, {color: saleAble1?'red':'white'}]}>{price1}</Text>
                                      {saleAble1?<Text style={styles.deleteSale}>{sale1}</Text>:null}
                                  </View>
                             </View>:null}
                        </View>
                    </TouchableOpacity>
                  <View style={styles.subContainer}>
                    <TouchableOpacity yh_exposureData={yh_exposureData1} activeOpacity={1.0} style={styles.image}
                    onPress={() => {this.props.onPressProduct && this.props.onPressProduct(url2,moduleOrder,moduleType,2)}} >
                          <YH_Image url={backgroundImage2} style={[styles.image,{resizeMode: 'cover'}]}/>
                          {linkType2=='1' && showProductInfo?<View style={styles.maskContainer1}>
                             <Text style={styles.titleText} numberOfLines={2}>{name2}</Text>
                             <View style={[styles.priceContainer,{marginRight: 10}]}>
                                 <Text style={[styles.price,{color: saleAble2?'red':'white'}]}>{price2}</Text>
                                  {saleAble2?<Text style={styles.deleteSale}>{sale2}</Text>:null}
                              </View>
                         </View>:null}
                    </TouchableOpacity>
                    <TouchableOpacity yh_exposureData={yh_exposureData2} activeOpacity={1.0} style={styles.image}
                    onPress={() => {this.props.onPressProduct && this.props.onPressProduct(url3,moduleOrder,moduleType,3)}} >
                      <YH_Image url={backgroundImage3} style={[styles.image,{resizeMode: 'cover'}]}/>
                      {linkType3=='1' && showProductInfo?<View style={styles.maskContainer1}>
                         <Text style={styles.titleText} numberOfLines={2}>{name3}</Text>
                         <View style={[styles.priceContainer, {marginRight: 10}]}>
                             <Text style={[styles.price, {color: saleAble3?'red':'white'}]}>{price3}</Text>
                              {saleAble3?<Text style={styles.deleteSale}>{sale3}</Text>:null}
                          </View>
                     </View>:null}
                    </TouchableOpacity>
                  </View>
                </View>
            )
            break;
      default:
        return null;
    }
  }
}

let {width, height} = Dimensions.get('window');
let containerHeigth = Math.ceil((468/750)*width);
let containerHeigth3 = Math.ceil(width/3);
let containerHeigth4 = Math.ceil((333/750)*width);
let maskHeight = 30;
let nullHeigth = 10;

let styles = StyleSheet.create({
    container:{
        flexDirection: 'row',
        width:width,
        backgroundColor: '#f0f0f0'
    },
    subContainer:{
        width:width / 2,
        flexDirection: 'column',
    },
    maskContainer1: {
        position: 'absolute',
        width: width/2,
        height: maskHeight,
        backgroundColor: 'rgba(0,0,0,0.3)',
        top: containerHeigth/2-maskHeight,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    maskContainer2: {
        position: 'absolute',
        width: width/2,
        height: maskHeight,
        backgroundColor: 'rgba(0,0,0,0.3)',
        top: containerHeigth-maskHeight,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-around',
    },
    image:{
        width:width/2,
        height: containerHeigth / 2,
        backgroundColor: '#f5f7f6',
    },
    imageBig:{
        width:width/2,
        height: containerHeigth,
        backgroundColor: '#f5f7f6',
    },
    titleText: {
        color:'white',
        width : 80,
        fontSize: 11,
        textAlign :'left',
        backgroundColor: 'transparent',
        fontWeight: 'bold',
        marginLeft: 10,
    },
    priceContainer: {
        backgroundColor: 'transparent',
        flexDirection: 'row'
    },
    price: {
        fontSize: 12,
        backgroundColor: 'transparent',
    },
    deleteSale: {
        marginLeft: 2,
        marginTop: 4,
        fontSize: 11,
        backgroundColor: 'transparent',
        color: 'white',
        textDecorationLine: 'line-through',
    },
    saleView:{
		flexDirection: 'row',
    },
});