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 {getSlicedUrl} from '../../../classify/utils/Utils';

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

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

	  render() {

		 let {resource ,row_ID} = this.props;
	  	if (!resource) {
	  		return null;
	  	}
		let template_name = resource?resource.get('template_name'):'';
		let template_id = resource?resource.get('template_id'):0;

	  	let data = resource.get('data').toJS();

	    let src1 = getSlicedUrl(data.left[0].src, width, backgroundHeight);
	    let url1 = data.left[0].url;

	    let src2 = getSlicedUrl(data.right[0].src, width, backgroundHeight);
	    let url2 = data.right[0].url;

	    let src3 = getSlicedUrl(data.right[1].src, width, backgroundHeight);
	    let url3 = data.right[1].url;



        return (
            <View style={styles.container}>
				<View style={styles.leftView}>
					<TouchableOpacity onPress={() => {this.props.onPressProduct && this.props.onPressProduct(url1,row_ID,1,template_name,template_id)}} >
						<View style={styles.leftImage}>
							<YH_Image url={src1} style={styles.leftImage}></YH_Image>
						</View>
					</TouchableOpacity>
				</View>
				<View style={styles.rightView}>
					<TouchableOpacity onPress={() => {this.props.onPressProduct && this.props.onPressProduct(url2,row_ID,1,template_name,template_id)}} >
						<YH_Image url={src2} style={styles.rightImage1}></YH_Image>
					</TouchableOpacity>
					<TouchableOpacity onPress={() => {this.props.onPressProduct && this.props.onPressProduct(url3,row_ID,1,template_name,template_id)}} >
						<YH_Image url={src3} style={styles.rightImage2}></YH_Image>
					</TouchableOpacity>
				</View>
            </View>
        )
	}
}

let {width, height} = Dimensions.get('window');
let backgroundHeight = Math.ceil((297 / 640) * width);
let spaceH = Math.ceil((30 / 640) * width);
let imageWidth = Math.ceil((275 / 640) * width);
let rightImageWidth = Math.ceil((134 / 640) * width);

let styles = StyleSheet.create({
    container: {
        width: width,
		height: backgroundHeight + spaceH,
        flexDirection: 'row',
    },
	leftView: {
		width: imageWidth,
		height: backgroundHeight,
		marginLeft: spaceH,
		backgroundColor: 'white',
	},
	leftImage: {
		width: imageWidth,
		height: backgroundHeight,
	},
	rightView: {
		width: imageWidth,
		height: backgroundHeight,
		marginLeft: spaceH,
		backgroundColor: 'white',
	},
	rightImage1: {
		width: imageWidth,
		height: rightImageWidth,
	},
	rightImage2: {
		width: imageWidth,
		height: rightImageWidth,
		marginTop: spaceH-1,
	},
});