'use strict';

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

import Immutable, {Map} from 'immutable';

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 ActionView 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);
                }
            },1000);
        }
    }

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

    render() {

        return (
            <View style={styles.container}>
                {this.showTimer && this.state.timeLeft
                    ? <View style={styles.timerContainer}>
                        <Image style={styles.clockImage} source={require('../../image/countDown.png')}/>
                        <Text style={styles.time}>{this.state.timerString}</Text>
                    </View>
                    : null
                }

                <View style={styles.buttonContainer}>
                    {this.props.buttonLiks.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.orderAction && this.props.orderAction(item)
                            }}>
                                <Text style={textStyle}>{buttonText}</Text>
                            </TouchableOpacity>
                        );
                    })}
                </View>
            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    container:{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    buttonContainer: {
        flex:1,
        height: 59,
        borderColor:'#e5e5e5',
        borderBottomWidth:1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
        backgroundColor: 'transparent'
    },
    timerContainer: {
        width: 130,
        // height: 30,
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'center',
        backgroundColor: 'transparent',
    },
    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,
        fontFamily: 'STHeitiSC-Light',
        color: '#444444'
    },
    whiteText: {
        fontSize: 14,
        fontFamily: 'STHeitiSC-Light',
        color: 'white'
    },
    redText: {
        fontSize: 14,
        fontFamily: 'STHeitiSC-Light',
        color: '#d0021b'
    },
    time:{
        width: 90,
        fontSize:14,
        color:'#b0b0b0',
        marginLeft: 4,
    }
});