'use strict';

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

export default class TimeForFocus extends Component {

    constructor(props) {
        super(props);
    }

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

        let colorStyle = {color: '#3e3e3e'};
        let TimeComponent = null;
        if (now) {
            TimeComponent = TimeForNow;
        } else if (over) {
            TimeComponent = TimeForOver;
        } else if (wait) {
            TimeComponent = TimeForWait;
        }

        return (
            <View style={styles.rowContainerFocus}>
                {TimeComponent ?
                    <TimeComponent
                        time={time}
                        tickTimeOut={tickTimeOut}
                        tickHour={tickHour}
                        tickMinute={tickMinute}
                        tickSecond={tickSecond}
                        lastNowTime={lastNowTime}
                    />
                    : null}
            </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',
        justifyContent: 'center',
        width: rowContainerFocusWidth,
        height: backgroundHeight,
        backgroundColor:'white',
    },
});