'use strict';

import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';
import YH_Image from '../../../common/components/YH_Image';
import {getSlicedUrl} from '../../../classify/utils/Utils';
import DeviceInfo from 'react-native-device-info';

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

export default class ActivityCell extends React.Component {

    constructor(props) {
        super (props);
        this.getStartTimeString = this.getStartTimeString.bind(this);
        this.getEndTimeString = this.getEndTimeString.bind(this);

        let {resource} = this.props;
        if (!resource) {
            return null;
        }
        let data = resource.toJS();
        let startLeftTime = data.startLeftTime;
        let endLeftTime = data.endLeftTime;
        let startTime = data.startTime;
        let endTime = data.endTime;

        let showString = '';
        if (startLeftTime <= 0) {
            if (endLeftTime <= 0) {
                showString = '活动已结束'
            }else {
                showString = this.getEndTimeString(endLeftTime);
            }
            this.state= {
                timerCount: endLeftTime,
                showString: showString,
            };
            this.interval=setInterval(() =>{
                let timer=this.state.timerCount-1;
                if(timer===0){
                    this.interval&&clearInterval(this.interval);
                    this.setState({timerCount:0,showString: '活动已结束'})
                } else{
                    this.setState({
                        timerCount: timer,
                        showString: this.getEndTimeString(timer),
                    })
                }
            },1000)
        } else {
            if (startTime <= 0) {
                return null;
            }else {
                showString = this.getStartTimeString(startTime);
            }
            this.state= {
                timerCount: startTime,
                showString: showString,
            };
        }
    }

    componentWillUnmount() {
        this.interval && clearInterval(this.interval);
    }

    getStartTimeString(startTime){
        let startDate = new Date(startTime);
        return startDate.getMonth()+'月'+startDate.getDate()+'日'+startDate.getHours()+'时'+'开始';
    }

    getEndTimeString(timeTick){

        let showString = '';
        let day = 0;
        let hour = 0;
        let minute = 0;
        let second = 0;
        let minuteFloat = 0;

        if (timeTick >= kTimeDay) {
            day = parseInt(timeTick/kTimeDay);
            hour = parseInt(timeTick%kTimeDay/kTimeHour);
            minute = parseInt(timeTick%kTimeHour/kTimeMinute);
            second = parseInt(timeTick%kTimeMinute);
        } else if (timeTick >= kTimeHour) {
            hour = parseInt(timeTick/kTimeHour);
            minuteFloat= parseInt(timeTick%kTimeHour);
            if (minuteFloat >= kTimeMinute) {
                minute = parseInt(minuteFloat/kTimeMinute);
                second = parseInt(minuteFloat%kTimeMinute);
            } else {
                second = minuteFloat;
            }
        } else if (timeTick >= kTimeMinute){
            minute = parseInt(timeTick/kTimeMinute);
            second = parseInt(timeTick%kTimeMinute);
        } else {
            second = timeTick;
        }
        if (day > 0) {
            showString = day+'天';
        }
        return '还剩'+showString+hour+'小时'+minute+'分'+second+'秒';
    }

    render() {

		let {resource ,row_ID} = this.props;
        if (!resource) {
			return null;
		}

        let fontFamilyStyle1 = {};
        if (Platform.OS === 'ios') {
            let systemVersion = DeviceInfo.getSystemVersion();
            systemVersion = parseFloat(systemVersion);
            if (systemVersion >= 9.0) {
                fontFamilyStyle1 = {fontFamily: 'Helvetica Bold'};
            }
        }

        let data = resource.toJS();
		let newSrc = getSlicedUrl(data.coverUrl, backgroundWidth, backgroundHeight);
        let title = data.title;
        let promotionName = data.promotionName;
        let isShow = data.isShow;
        let id = data.id;
        let price = promotionName&&promotionName.length>2?promotionName.substring(0,promotionName.length-2):''
        let priceString = promotionName&&promotionName.length>2?promotionName.substring(promotionName.length-2,promotionName.length):''
        let startLeftTime = data.startLeftTime;

		return (
			<View style={styles.container}>
				<TouchableOpacity
					activeOpacity={1}
					style={{width: backgroundWidth, height: backgroundHeight}}
					onPress={() => {
                        if (startLeftTime <= 0) {
                            if (this.state.showString == '活动已结束') {
                                this.props.showToast && this.props.showToast('活动已结束，敬请期待。');
                            }else {
                                let url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.outletactivity","params":{"activity_id":"${id}"}}`;
        						this.props.onPressProduct && this.props.onPressProduct(url,row_ID,1,'','');
                            }
                        }else {
                            this.props.showToast && this.props.showToast('活动还未开始，敬请期待');
                        }
					}}
				>
					<YH_Image
						url={newSrc}
						style={{ width: backgroundWidth, height: backgroundHeight}}
					/>
                    <View style={styles.detailV}>
                        <Text style={[styles.title, fontFamilyStyle1]}>{title}</Text>
                        <View style={styles.priceV}>
                            <Text style={[styles.price1, fontFamilyStyle1]}>{price}</Text>
                            <Text style={[styles.price2, fontFamilyStyle1]}>{priceString}</Text>
                        </View>
                        <Text style={[styles.time, fontFamilyStyle1]}>{this.state.showString}</Text>
                    </View>
				</TouchableOpacity>
				<View style={styles.space} />
			</View>
		);
    }
}

let {width, height} = Dimensions.get('window');
let backgroundWidth = width;
let backgroundHeight = Math.ceil((300 / 640) * width);
let spaceH = Math.ceil((30 / 640) * width);
let kTimeDay = 3600*24;
let kTimeHour = 3600;
let kTimeMinute = 60;

let styles = StyleSheet.create({
	container: {
		width: width,
		height: backgroundHeight + spaceH,
	},
    detailV: {
        position: 'absolute',
        top: Math.ceil((130 / 640) * width),
        width: width,
        height: Math.ceil((170 / 640) * width),
        backgroundColor: 'transparent',
    },
    title: {
        width: width,
        height: Math.ceil((30 / 640) * width),
        textAlign: 'center',
        fontSize: 16,
    },
    priceV: {
        flexDirection: 'row',
        marginTop: Math.ceil((10 / 640) * width),
        height: Math.ceil((30 / 640) * width),
        alignSelf: 'center',
    },
    price1: {
        height: Math.ceil((30 / 640) * width),
        textAlign: 'right',
        fontSize: 20,
        color: '#d0021b',
    },
    price2: {
        height: Math.ceil((30 / 640) * width),
        marginTop: Math.ceil((5 / 640) * width),
        textAlign: 'left',
        fontSize: 12,
        color: '#d0021b',
    },
    time: {
        width: width,
        height: Math.ceil((30 / 640) * width),
        marginTop: Math.ceil((12 / 640) * width),
        textAlign: 'center',
        fontSize: 12,
    },
	space: {
        width: width,
        height: spaceH,
        backgroundColor: 'white',
    },
});