'use strict';

import React, {Component} from 'react';
import ReactNative, {
    View,
    Text,
    StyleSheet,
    Dimensions,
} from 'react-native';
import Immutable, {Map} from 'immutable';
import TimeNumber from './PBTimeNumber';

export default class PBTimeForWait extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        let {
            time,
            tickTimeOut,
            tickHour,
            tickMinute,
            tickSecond,
        } = this.props;

        let colorStyle = {color: '#d30018'};

        return (
            <View style={styles.rowContainerFocus}>
                <Text style={[colorStyle,{fontSize: 13, marginTop:15, fontWeight:'bold'}]}>{time} 即将开抢</Text>
                {tickTimeOut ? null :
                    <View style={styles.tickTimeContainer}>
                        <Text style={[colorStyle, {fontSize: 10}]}>距开抢:</Text>
                        <TimeNumber text={tickHour} />
                        <TimeNumber text={tickMinute} />
                        <TimeNumber text={tickSecond} />
                    </View>}
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');
let backgroundHeight = 61;
let rowContainerFocusWidth = Math.ceil((294 * width) / 750);

let styles = StyleSheet.create({
    rowContainerFocus: {
        flexDirection: 'column',
        alignItems: 'center',
        width: rowContainerFocusWidth,
        height: backgroundHeight,
        backgroundColor:'white',
    },
    tickTimeContainer: {
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
    },
});