'use strict';

import React, {Component} from 'react';
import ReactNative, {
    View,
    TouchableOpacity,
    StyleSheet,
    Dimensions,
} from 'react-native';
import Immutable, {Map} from 'immutable';


import SlicedImage from '../../../common/components/SlicedImage';
import YH_Image from '../../../common/components/YH_Image';

import HeadTitleCell from '../cell/HeadTitleCell';

/**
 *   新品到着楼层,
 *   这个楼层是左边一个大图（第一条数据），右边是四张小图，左上图（第二条数据），左下图（第三条数据），右上图（第四条数据），右下图（第五条数据）
 **/
export default class NewProductFloor extends Component{


	constructor(props) {
	  super(props);
	}


	render(){

        let data = this.props.data;
		let title = data.get("title");
		let imglst = data.get("list");

		let leftBigImageUrl = SlicedImage.getSlicedUrl(imglst.get(0).get("src"), leftBigImageWidth, leftBigImageHeight, 2);
		let rightSmallTopLeftImageUrl = SlicedImage.getSlicedUrl(imglst.get(1).get("src"), rightSmallImageWidth, rightSmallImageHeight, 2);
		let rightSmallBottomLeftImageUrl = SlicedImage.getSlicedUrl(imglst.get(2).get("src"), rightSmallImageWidth, rightSmallImageHeight, 2);
		let rightSmallTopRightImageUrl = SlicedImage.getSlicedUrl(imglst.get(3).get("src"), rightSmallImageWidth, rightSmallImageHeight, 2);
		let rightSmallBottomRightImageUrl = SlicedImage.getSlicedUrl(imglst.get(4).get("src"), rightSmallImageWidth, rightSmallImageHeight, 2);

        let yh_exposureDataTitle = title.get('yh_exposureData') ? title.get('yh_exposureData').toJS() : null;
        let yh_exposureData0 = imglst.get(0).get('yh_exposureData') ? imglst.get(0).get('yh_exposureData').toJS() : null;
        let yh_exposureData1 = imglst.get(1).get('yh_exposureData') ? imglst.get(1).get('yh_exposureData').toJS() : null;
        let yh_exposureData2 = imglst.get(2).get('yh_exposureData') ? imglst.get(2).get('yh_exposureData').toJS() : null;
        let yh_exposureData3 = imglst.get(3).get('yh_exposureData') ? imglst.get(3).get('yh_exposureData').toJS() : null;
        let yh_exposureData4 = imglst.get(4).get('yh_exposureData') ? imglst.get(4).get('yh_exposureData').toJS() : null;

		return(
			<View style={styles.container}>
				<HeadTitleCell title={title.get('title')} moreUrl={title.get('more_url')} 
                    onPressTitleMore={this.props.onPressTitleMore} yh_exposureData={yh_exposureDataTitle}/>

				<View style={styles.imageContainer}>

					<TouchableOpacity style={styles.leftBigImageContainer} activeOpacity={1} yh_exposureData={yh_exposureData0}
						onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(0).get('url'), leftBigImageUrl, 0)}>
						<YH_Image style={styles.leftBigImage} resizeMode={'stretch'} url={leftBigImageUrl}/>
					</TouchableOpacity>

					<TouchableOpacity style={styles.rightSmallTopLeftImageContainer} activeOpacity={1} yh_exposureData={yh_exposureData1}
						onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(1).get('url'), rightSmallTopLeftImageUrl, 1)}>
						<YH_Image style={styles.rightSmallTopLeftImage} resizeMode={'stretch'} url={rightSmallTopLeftImageUrl}/>
					</TouchableOpacity>

					<TouchableOpacity style={styles.rightSmallBottomLeftImageContainer} activeOpacity={1} yh_exposureData={yh_exposureData2}
						onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(2).get('url'), rightSmallBottomLeftImageUrl, 2)}>
						<YH_Image style={styles.rightSmallBottomLeftImage} resizeMode={'stretch'}  url={rightSmallBottomLeftImageUrl}/>
					</TouchableOpacity>

					<TouchableOpacity style={styles.rightSmallTopRightImageContainer} activeOpacity={1} yh_exposureData={yh_exposureData3}
						onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(3).get('url'), rightSmallTopRightImageUrl, 3)}>
						<YH_Image style={styles.rightSmallTopRightImage} resizeMode={'stretch'} url={rightSmallTopRightImageUrl}/>
					</TouchableOpacity>

					<TouchableOpacity style={styles.rightSmallBottomRightImageContainer} activeOpacity={1} yh_exposureData={yh_exposureData4}
						onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(4).get('url'), rightSmallBottomRightImageUrl ,4)}>
						<YH_Image style={styles.rightSmallBottomRightImage} resizeMode={'stretch'} url={rightSmallBottomRightImageUrl}/>
					</TouchableOpacity>
				</View>
			</View>
        );
	}

};

let {width} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;
let leftBigImageWidth = width * 315 / 750;
let leftBigImageHeight = leftBigImageWidth * 420 / 315;
let rightSmallImageWidth = (width - leftBigImageWidth) / 2;
let rightSmallImageHeight = leftBigImageHeight / 2;
let containerHeight = 40 + leftBigImageHeight;



let styles = StyleSheet.create({

	container: {
        width: width,
        height: containerHeight,
		backgroundColor: "#e5e5e5",
    },

    imageContainer: {
        width: width,
        height: leftBigImageHeight,
    },

    leftBigImageContainer: {
    	position: 'absolute',
    	top: 0,
    	left: 0,
        width: leftBigImageWidth,
		height: leftBigImageHeight,
    },

    leftBigImage: {
        width: leftBigImageWidth,
		height: leftBigImageHeight,
        resizeMode: 'stretch',
    },

    rightSmallTopLeftImageContainer: {
    	position: 'absolute',
    	top: 0,
    	left: leftBigImageWidth,
        width: rightSmallImageWidth,
		height: rightSmallImageHeight,
    },

    rightSmallTopLeftImage: {
        width: rightSmallImageWidth,
		height: rightSmallImageHeight,
        resizeMode: 'stretch',
    },

    rightSmallBottomLeftImageContainer: {
    	position: 'absolute',
    	top: rightSmallImageHeight,
    	left: leftBigImageWidth,
        width: rightSmallImageWidth,
		height: rightSmallImageHeight,
    },

    rightSmallBottomLeftImage: {
        width: rightSmallImageWidth,
		height: rightSmallImageHeight,
        resizeMode: 'stretch',
    },

    rightSmallTopRightImageContainer: {
    	position: 'absolute',
    	top: 0,
    	left: leftBigImageWidth + rightSmallImageWidth,
        width: rightSmallImageWidth,
		height: rightSmallImageHeight,
    },

    rightSmallTopRightImage: {
        width: rightSmallImageWidth,
		height: rightSmallImageHeight,
        resizeMode: 'stretch',
    },


    rightSmallBottomRightImageContainer: {
    	position: 'absolute',
    	top: rightSmallImageHeight,
    	left: leftBigImageWidth + rightSmallImageWidth,
        width: rightSmallImageWidth,
		height: rightSmallImageHeight,
    },

    rightSmallBottomRightImage: {
        width: rightSmallImageWidth,
		height: rightSmallImageHeight,
        resizeMode: 'stretch',
    },



});