'use strict';

import React from 'react';
import ReactNative from 'react-native';

const {
    View,
    TouchableOpacity,
    StyleSheet,
    Dimensions,
    Platform,
	Text,
	Image,
} = ReactNative;

import Immutable, {Map} from 'immutable';

export default class CouponCell extends React.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.resource?this.props.resource.toJS():null;
        let usedType = this.props.usedType;
        let index = this.props.index;
		let couponDetailInfomation = resource.couponDetailInfomation;
		let couponValidity = resource.couponValidity;
		let rule4ShortName = resource.rule4ShortName;
		let couponValue = resource.couponValue;
		let overState = resource.overState;
		let isNoLimit = resource.isNoLimit;
		let brandNameLimit = resource.brandNameLimit;
		let sortNameLimit = resource.sortNameLimit;
        let showDetail = resource.showDetail?resource.showDetail:false;
        let tipImage = showDetail?require('../../image/up_tip_ic.png'):require('../../image/down_tip_ic.png');

		let bottomText = brandNameLimit.length > 0 ? '限品牌：'+brandNameLimit[0] :'';
		    bottomText = sortNameLimit.length > 0 ? bottomText + '限品类：'+sortNameLimit[0] : bottomText;
		    bottomText = isNoLimit=='true' ? '全场通用' : bottomText;

		let backgroundHeigth = showDetail ? topBackgroundHeigth + detailBackgroundHeigth + 20 : topBackgroundHeigth + 20;
		return (
            <View style={{width: width,	height: backgroundHeigth,backgroundColor: 'white'}}>
                <View style={{width: width,height: 20,backgroundColor: 'white',}}/>
				<Image source={require('../../image/coupon1_tip_bg.png')} style={styles.couponBackgroundImage}></Image>
				<View style={styles.topContent}>
					<View style={styles.topTitleView}>
						<Text style={styles.topTitle} numberOfLines={1}>{couponDetailInfomation}</Text>
					</View>
					<View style={styles.topDetail}>
						<View style={styles.leftDetail}>
							<View style={styles.priceView}>
								<Text style={styles.price} numberOfLines={1}>{couponValue}</Text>
							</View>
							<Text style={styles.priceDetail} numberOfLines={1}>{rule4ShortName}</Text>
						</View>
						<View style={styles.rigthDetail}>
							<View style={styles.timeDetailTopView}>
								<Text style={styles.timeDetailTop} numberOfLines={1}>{couponValidity}</Text>
								{usedType == 0 && overState ? <Text style={styles.timeDetail2} numberOfLines={1}>({overState})</Text>:null}
							</View>
							<View style={styles.timeDetailBottomView}>
								<TouchableOpacity activeOpacity={1} style={styles.timeDetailBottomView}
								   onPress={() => {
                                       this.props.showCouponDetail && this.props.showCouponDetail(usedType,index,!showDetail)
								   }}
								>
									<Text style={styles.timeDetailSwitch} numberOfLines={1}>详细信息</Text>
									<Image source={tipImage} style={styles.timeDetailSwitchIcon}></Image>
								</TouchableOpacity>
                                {usedType == 0 ? 	<TouchableOpacity activeOpacity={1} style={styles.button}
    								   onPress={() => {
    										this.props.onPressUseNow && this.props.onPressUseNow(resource)
    								   }}
    								>
    									<Image source={require('../../image/ljsy_tip_an.png')} style={styles.button}></Image>
    								</TouchableOpacity> :
    								<Image source={require('../../image/coupon_mark_used.png')} style={styles.usedIcon}></Image>
                                    }
							</View>
						</View>
					</View>
				</View>
				{showDetail ? <View style={styles.bottom}>
					<Image source={require('../../image/coupon2_tip_bg.png')} style={styles.bottomBackgroundImage}></Image>
					<View style={styles.bottomContent}>
						<Text style={styles.bottomText1} numberOfLines={1}>{bottomText}</Text>
						<View style={styles.bottomText2View}>
							<Text style={styles.bottomText2} numberOfLines={2}>特例商品(秒杀、限定、境外、预售等)暂不支持使用优惠卷</Text>
						</View>
					</View>
				</View> : null}
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');
let sc = 360/1037;//背景宽高比
let scTop = 90/360;//上面标题栏占背景比例
let scLeft = 345/1037;//左侧占背景比例
let topBackgroundHeigth = sc*(width - 50);
let topBackgroundWidth = width - 50;

let sc2 = 182/1035;//背景宽高比
let detailBackgroundHeigth = sc2*(width - 50);
let detailBackgroundWidth = width - 50;
const DEVICE_WIDTH_RATIO = width / 320;

let styles = StyleSheet.create({

	couponBackgroundImage: {
		width: topBackgroundWidth,
		height: topBackgroundHeigth,
		marginLeft: 25,
	},
	topContent: {
		width: topBackgroundWidth,
		height: topBackgroundHeigth,
		left: 25,
		marginTop: -topBackgroundHeigth,
		position: 'absolute',
		backgroundColor: 'transparent',
	},
	topTitleView: {
		height: topBackgroundHeigth * scTop,
		width: topBackgroundWidth,
		marginLeft: 10,
		justifyContent: 'center',
	},
	topTitle: {
		color: 'white',
	},
	topDetail: {
		height: topBackgroundHeigth - topBackgroundHeigth * scTop,
		width: topBackgroundWidth,
		backgroundColor: 'transparent',
		flexDirection: 'row',
	},
	leftDetail: {
		height: topBackgroundHeigth - topBackgroundHeigth * scTop,
		width: topBackgroundWidth*scLeft,
		backgroundColor: 'transparent',
	},
	priceView: {
		height: ( topBackgroundHeigth - topBackgroundHeigth * scTop ) * 0.55,
		width: topBackgroundWidth*scLeft,
		backgroundColor: 'transparent',
		alignItems: 'center',
		justifyContent: 'center',
		marginTop: 10,
	},
	price: {
		color: 'white',
		fontSize: 40,
	},
	priceDetail: {
		color: 'white',
		fontSize: 11,
		textAlign: 'center',
	},

	rigthDetail: {
		height: topBackgroundHeigth - topBackgroundHeigth * scTop,
		width: topBackgroundWidth*(1-scLeft),
		backgroundColor: 'transparent',
	},
	timeDetailTopView: {
		height: 50,
		width: topBackgroundWidth*(1-scLeft),
		backgroundColor: 'transparent',
	},
	timeDetailTop: {
		color: 'white',
		fontSize: 13,
		marginLeft: 15,
		marginTop: 12,
	},
	timeDetail2: {
		fontSize: 13,
		marginLeft: 15,
	},
	timeDetailBottomView: {
		height: 30,
		width: topBackgroundWidth*(1-scLeft),
		backgroundColor: 'transparent',
		marginTop: 5,
		alignItems: 'center',
		flexDirection: 'row',
	},
	timeDetailSwitch: {
		color: 'white',
		fontSize: 12,
		marginLeft: 15,
	},
	timeDetailSwitchIcon: {
		marginLeft: 5,
	},
	button: {
		width: 50,
		height: 20,
		position: 'absolute',
		right: 15,
		top: 5,
	},
    usedIcon: {
        width: detailBackgroundHeigth + 8,
		height: detailBackgroundHeigth + 8,
		position: 'absolute',
		right: 10,
		bottom: -5,
    },

	bottom: {
		width: detailBackgroundWidth,
		height: detailBackgroundHeigth,
	},
	bottomBackgroundImage: {
		width: detailBackgroundWidth,
		height: detailBackgroundHeigth,
		marginLeft: 25,
	},
	bottomContent: {
		width: detailBackgroundWidth,
		height: detailBackgroundHeigth,
		left: 25,
		marginTop: -detailBackgroundHeigth,
		position: 'absolute',
	},
	bottomText1: {
		color: 'white',
		fontSize: 13,
		marginLeft: 15,
		backgroundColor: 'transparent',
		marginTop: 10,
	},
	bottomText2View: {
		height: 30,
		marginLeft: 15,
		backgroundColor: 'transparent',
		marginTop: 2,
		justifyContent: 'center',
	},
	bottomText2: {
		color: 'white',
		fontSize: 13,
		marginTop: 2,
	},
});