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';
import TripleImageSquare from './TripleImageSquare';
import TripleImageRectangle from './TripleImageRectangle';
import TripleImageOneBigSide from './TripleImageOneBigSide';

export default class TripleImage 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 properties = resource.get('module_data').get('properties').toJS();
    let displayType = properties.displayType;

    switch (displayType) {
        case '1':
            return (
                <TripleImageRectangle
                    yh_exposureData={this.props.yh_exposureData}
                    resource={resource}
                    onPressProduct={this.props.onPressProduct}
                />
            )
            break;
        case '2':
            return (
                <TripleImageSquare
                    yh_exposureData={this.props.yh_exposureData}
                    resource={resource}
                    onPressProduct={this.props.onPressProduct}
                />
            )
            break;
        case '3':
        case '4':
            return (
                <TripleImageOneBigSide
                    yh_exposureData={this.props.yh_exposureData}
                    resource={resource}
                    onPressProduct={this.props.onPressProduct}
                />
            )
            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({
    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',
    },
    maskContainer3:{
        position: 'absolute',
        width: width/3,
        height: 24,
        backgroundColor: 'rgba(0,0,0,0.3)',
        top: containerHeigth3-24,
        flexDirection: 'row',
        alignItems: 'center',
        flexDirection: 'row',
    },
    maskContainer4: {
        position: 'absolute',
        width: width/3,
        height: 40,
        backgroundColor: 'rgba(0,0,0,0.3)',
        top: containerHeigth4-40,
    },
    imagetype3: {
        width:width/3 ,
        height:containerHeigth3,
        backgroundColor: '#f5f7f6',
    },
    imagetype4:{
        width:width/3,
        height:containerHeigth4,
        backgroundColor: '#f5f7f6',
    },
    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,
    },
    price: {
        color:'white',
        width : 80,
        fontSize: 11,
        textAlign :'right',
    },
    price3: {
        width:width/3 ,
        height:maskHeight / 2,
        color: 'white',
        marginLeft: 10,
        fontSize: 11,
        textAlign :'left',
    },
    titleText4: {
        width:width/3 -10,
        height:maskHeight / 2,
        color: 'white',
        marginLeft: 10,
        fontSize: 11,
        textAlign :'left',
        marginTop: 4,
        fontWeight: 'bold',
    },
    price4: {
        width:width/3 ,
        height:maskHeight / 2,
        color: 'white',
        marginLeft: 10,
        fontSize: 11,
        textAlign : 'left',
        marginTop: 2,
    },
    deleteSale: {
        marginLeft: 2,
        marginTop: 4,
        fontSize: 11,
        backgroundColor: 'transparent',
        color: 'white',
        textDecorationLine: 'line-through',
    },

    deleteSale3: {
        marginLeft: 2,
        marginTop: 4,
        fontSize: 11,
        backgroundColor: 'transparent',
        color: 'white',
        textDecorationLine: 'line-through',
    },

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