'use strict';

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


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

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


/**
 *   首页 sale 楼层,
 *   这个楼层是标题、banner、左带倒计时大图，右四小图
 **/
export default class Sale1T1L4R extends Component{


	constructor(props) {
	  super(props);

      this._caculateTimerState = this._caculateTimerState.bind(this);

      this.state = {
          remainHour : "00",
          remainMinute : "00",
          remainSecond : "00",
          timeOut: true,
      };
	}

    componentDidMount() {

        this.timer = TimerMixin.setInterval(() => {
            if(diffTime > 0){
                diffTime = diffTime - 1;
                this._caculateTimerState();
            }
        }, 1000);
    }

    componentWillUnmount() {
        this.timer && TimerMixin.clearInterval(this.timer);
    }


    _caculateTimerState() {

        if(diffTime > 0){
            let hour = parseInt(diffTime / (60 * 60), 10);
            let minute = parseInt(diffTime % (60 * 60) / 60, 10);
            let second = diffTime % 60;
            this.setState({
                remainHour: hour < 0 ? '00' : (hour < 10 ? ('0' + hour) : hour),
                remainMinute: minute < 0 ? '00' : (minute < 10 ? ('0' + minute) : minute),
                remainSecond: second < 0 ? '00' : (second < 10 ? ('0' + second) : second),
                timeOut: false,
            });
        }
        else{
            this.setState({
                remainHour: '00',
                remainMinute: '00',
                remainSecond: '00',
                timeOut: true,
            });
            this.timer && TimerMixin.clearInterval(this.timer);
        }
    }


	render(){

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

        //剩余时间
        time = imglst.get(0).get("end_time");
        diffTime = time - Date.parse(new Date()) / 1000;

		let leftBigImageUrl = SlicedImage.getSlicedUrl(imglst.get(0).get("src"), leftBigImageWidth, leftBigImageHeight, 2);
		let rightTopBigImageUrl = SlicedImage.getSlicedUrl(imglst.get(1).get("src"), rightBigImageWidth, rightBigImageHeight, 2);
		let rightTopSmallImageUrl = SlicedImage.getSlicedUrl(imglst.get(2).get("src"), rightSmallImageWidth, rightSmallImageHeight, 2);
		let rightBottomBigImageUrl = SlicedImage.getSlicedUrl(imglst.get(3).get("src"), rightBigImageWidth, rightBigImageHeight, 2);
		let rightBottomSmallImageUrl = SlicedImage.getSlicedUrl(imglst.get(4).get("src"), rightSmallImageWidth, rightSmallImageHeight, 2);

        let containerHeight = 40 + leftBigImageHeight;
        if(banner.toJS().length > 0){
            containerHeight = containerHeight + bannerHeight;
        }

        let index = banner.toJS().length;

        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, {height: containerHeight}]}>
				<HeadTitleCell title={title.get('title')} moreUrl={title.get('more_url')} 
                    onPressTitleMore={this.props.onPressTitleMore} yh_exposureData={yh_exposureDataTitle}/>

                <ImageSlider
                    resource={banner}
                    sliderWidth={width}
                    sliderHeight={bannerHeight}
                    onPressSlideItem={this.props.onPressSlideItem}
                />

				<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, index)}>
						<YH_Image style={styles.leftBigImage} url={leftBigImageUrl}/>

                        <View style={styles.timerImageContainer}>
                            <Image style={styles.timerImage} source={require("../../images/home_sale_time.png")}/>
                            <Image source={require("../../images/home_sale_time_text.png")}/>
                        </View>

                        <View style={styles.timerTextContainer}>
                            <Text style={styles.timerText}>{this.state.remainHour}</Text>
                            <Text style={styles.timerTextSymbol}>:</Text>
                            <Text style={styles.timerText}>{this.state.remainMinute}</Text>
                            <Text style={styles.timerTextSymbol}>:</Text>
                            <Text style={styles.timerText}>{this.state.remainSecond}</Text>
                        </View>

					</TouchableOpacity>

					<TouchableOpacity style={styles.rightTopBigImageContainer} activeOpacity={1} yh_exposureData={yh_exposureData1}
						onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(1).get('url'), rightTopBigImageUrl, index+1)}>
						<YH_Image style={styles.rightTopBigImage} url={rightTopBigImageUrl}/>
					</TouchableOpacity>

					<TouchableOpacity style={styles.rightTopSmallImageContainer} activeOpacity={1} yh_exposureData={yh_exposureData2}
						onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(2).get('url'), rightTopSmallImageUrl, index+2)}>
						<YH_Image style={styles.rightTopSmallImage} url={rightTopSmallImageUrl}/>
					</TouchableOpacity>

					<TouchableOpacity style={styles.rightBottomBigImageContainer} activeOpacity={1} yh_exposureData={yh_exposureData3}
						onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(3).get('url'), rightBottomBigImageUrl, index+3)}>
						<YH_Image style={styles.rightBottomBigImage} url={rightBottomBigImageUrl}/>
					</TouchableOpacity>

					<TouchableOpacity style={styles.rightBottomSmallImageContainer} activeOpacity={1} yh_exposureData={yh_exposureData4}
						onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(4).get('url'), rightBottomSmallImageUrl, index+4)}>
						<YH_Image style={styles.rightBottomSmallImage} url={rightBottomSmallImageUrl}/>
					</TouchableOpacity>
				</View>
			</View>
        );
	}

};


let time = 0;
let diffTime = 0;

let {width} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;

let bannerHeight = Math.floor(width / 3);

let leftBigImageWidth = width * 310 / 740;
let leftBigImageHeight = leftBigImageWidth * 422 / 310;

let rightBigImageWidth = width * 330 / 740;
let rightBigImageHeight = rightBigImageWidth * 210 / 330;

let rightSmallImageWidth = width * 100 / 740;
let rightSmallImageHeight = rightSmallImageWidth * 210 / 100;


let styles = StyleSheet.create({

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

    imageContainer: {
        width: width,
        height: 422 * DEVICE_WIDTH_RATIO,
    },

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

    leftBigImage: {
        width: leftBigImageWidth,
		height: leftBigImageHeight,
    },

    timerImageContainer:{
        width: leftBigImageWidth,
        position: 'absolute',
        top: 20,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },

    timerImage:{
        paddingRight: 10,
    },

    timerTextContainer:{
        width: leftBigImageWidth,
        position: 'absolute',
        top: 50,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },

    timerText:{
        backgroundColor: '#ffffff',
        padding: 1,
        borderRadius: 2,
        color: '#444444',
        fontWeight: 'bold',
    },

    timerTextSymbol:{
        paddingLeft: 4,
        paddingRight: 4,
        color: '#ffffff',
        fontWeight: 'bold',
    },

    rightTopBigImageContainer: {
    	position: 'absolute',
    	top: 0,
    	left: leftBigImageWidth,
        width: rightBigImageWidth,
		height: rightBigImageHeight,
    },

    rightTopBigImage: {
        width: rightBigImageWidth,
        height: rightBigImageHeight,
    },

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

    rightTopSmallImage: {
        width: rightSmallImageWidth,
		height: rightSmallImageHeight,
    },

    rightBottomBigImageContainer: {
        position: 'absolute',
        top: rightBigImageHeight,
        left: leftBigImageWidth,
        width: rightBigImageWidth,
        height: rightBigImageHeight,
        marginTop: 2,
    },

    rightBottomBigImage: {
        width: rightBigImageWidth,
        height: rightBigImageHeight,
    },

    rightBottomSmallImageContainer: {
        position: 'absolute',
        top: rightBigImageHeight,
        left: leftBigImageWidth + rightBigImageWidth,
        width: rightSmallImageWidth,
        height: rightSmallImageHeight,
        marginTop: 2,
    },

    rightBottomSmallImage: {
        width: rightSmallImageWidth,
        height: rightSmallImageHeight,
    },




});