'use strict';

import React, {Component} from 'react';
import Immutable, {Map} from 'immutable';

import ReactNative, {
    View,
    Text,
    Image,
    ListView,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    InteractionManager,
    Platform
} from 'react-native';

function getTimerString(timeLeft) {
    let timerString = '';
    let minutes = Math.floor(timeLeft%3600/60);
    if (minutes<10) {
        minutes = '0' + minutes;
    }
    let seconds = Math.floor(timeLeft%60);
    if (seconds < 10) {
        seconds = '0' + seconds;
    }
    if (Math.floor(timeLeft/3600)) {
        timerString = Math.floor(timeLeft/3600) + ':' + minutes + ':' +seconds;
    } else {
        timerString =  minutes + ':' +seconds;
    }
    return '剩余'+timerString;
}

export default class Footer extends Component {

    constructor(props) {
        super(props);

        let {pay_lefttime, counter_flag, is_cancel} = this.props.data.toJS();
        this.showTimer = counter_flag == 'Y' && is_cancel == 'N' && parseInt(pay_lefttime);
        if (this.showTimer) {
            this.state= {
                timeLeft: parseInt(pay_lefttime),
                timerString: getTimerString(parseInt(pay_lefttime)),
            };
            this.timer=setInterval(() =>{
                let newTimeLeft = this.state.timeLeft - 1;
                let newTimerString = getTimerString(newTimeLeft);
                this.setState({
                    timeLeft: newTimeLeft,
                    timerString: newTimerString,
                })
                if (newTimeLeft <= 0) {
                    this.timer&&clearInterval(this.timer);
                    this.props.refreshDetail && this.props.refreshDetail();
                }
            },1000);
        }
    }

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

    render() {
        let {pay_lefttime, counter_flag, is_cancel} = this.props.data.toJS();
        let marginTop = this.showTimer? -30 : 0;

        return (
            <View style={{backgroundColor: 'transparent', marginTop}}>
            {this.showTimer && this.state.timeLeft
                ? <View style={styles.timerContainer}>
                    <Image style={styles.clockImage} source={require('../../image/countDown.png')}/>
                    <Text style={[styles.whiteText, {width: 90}]}>{this.state.timerString}</Text>
                </View>
                : null
            }
            <View style={styles.footer}>

                {this.props.buttonArray.map((item, index) => {
                    let buttonText = '';
                    let buttonStyle = styles.commonButton;
                    let textStyle = styles.commonText;
                    switch (item) {
                        case 'buyNow':
                            buttonText = '立即付款';
                            buttonStyle = styles.redButton;
                            textStyle = styles.whiteText;
                            break;
                        case 'closeOrder':
                            buttonText = '取消订单';
                            break;
                        case 'confirm':
                            buttonText = '确认收货';
                            buttonStyle = styles.redButton;
                            textStyle = styles.whiteText;
                            break;
                        case 'getExpress':
                            buttonText = '查看物流';
                            break;
                        case 'shareOrder':
                            buttonText = '晒单评价';
                            buttonStyle = [styles.commonButton, {backgroundColor: '#444444'}];
                            textStyle = styles.whiteText;
                            break;
                        case 'delOrder':
                            buttonText = '删除订单';
                            break;
                        case 'lookQrcode':
                            buttonText = '查看二维码';
                            break;
                        case 'afterService':
                            buttonText = '申请售后';
                            break;
                        case 'readd':
                            buttonText = '再次购买';
                            break;
                        case 'modifyAddress':
                            buttonText = '修改地址';
                            break;
                        case 'refundApply':
                            buttonText = '申请退款';
                            break;
                        default:
                    }
                    return (
                        <TouchableOpacity key={index} style={buttonStyle} onPress={() => {
                            this.props.onPressFooterAction && this.props.onPressFooterAction(item)
                        }}>
                            <Text style={textStyle}>{buttonText}</Text>
                        </TouchableOpacity>
                    );
                })}
            </View>
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');
let buttonPadding = 6;

let styles = StyleSheet.create({
    footer: {
        width: width,
        height: 59,
        borderColor: '#ededed',
        borderTopWidth: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
        backgroundColor: 'white'
    },
    commonButton: {
        marginRight: 15,
        marginLeft: 0,
        paddingLeft: buttonPadding,
        paddingRight: buttonPadding,
        backgroundColor: 'white',
        borderColor: '#444444',
        borderRadius: 3,
        borderWidth: 1,
        alignItems: 'center',
        height: 30,
        justifyContent: 'center'
    },
    redButton: {
        marginRight: 15,
        marginLeft: 0,
        paddingLeft: buttonPadding,
        paddingRight: buttonPadding,
        backgroundColor: '#d0021b',
        borderRadius: 3,
        alignItems: 'center',
        height: 30,
        justifyContent: 'center'
    },
    redFrameButton: {
        marginRight: 15,
        marginLeft: 0,
        paddingLeft: buttonPadding,
        paddingRight: buttonPadding,
        backgroundColor: 'white',
        borderColor: '#d0021b',
        borderRadius: 3,
        borderWidth: 1,
        alignItems: 'center',
        height: 30,
        justifyContent: 'center'
    },
    commonText: {
        fontSize: 14,
        color: '#444444',
        fontFamily: 'STHeitiSC-Light',
    },
    whiteText: {
        fontSize: 14,
        fontFamily: 'STHeitiSC-Light',
        color: 'white'
    },
    redText: {
        fontSize: 14,
        fontFamily: 'STHeitiSC-Light',
        color: '#d0021b'
    },
    clockImage: {
        width: 13,
        height: 13,
        marginRight: 6,
    },
    timerContainer: {
        width: width,
        height: 30,
        backgroundColor: 'rgba(0,0,0,0.6)',
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'center',
    }
});