import React from 'react';
import {connect} from 'react-redux';

import moment from 'moment';

import std from '../service/std';
import './NavbarStatus.less';

class NavbarStatus extends React.Component {
    constructor() {
        super();
        this.state = {
            user: '',
            time: ''
        };
    }

    componentDidMount() {
        this.getUserInfo();
        this.initDateTime();
    }

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

    getUserInfo() {
        std.os.getUser()
            .then(user => {
                this.setState({user: user});
            });
    }

    initDateTime() {
        std.os.getDate()
            .then(data => {
                let {timestamp} = data;
                this.systemTime = moment(timestamp);
                this.setState({
                    time: this.systemTime.format('YYYY-MM-DD HH:mm:ss')
                });
                this.timer = setInterval(() => {
                    this.systemTime.add(1, 's');
                    this.setState({
                        time: this.systemTime.format('YYYY-MM-DD HH:mm:ss')
                    });
                }, 1000);
            });
    }

    render() {
        return (
            <div className='navbar-status'>
                <span className='status-item'>{this.state.time}</span>
                <span className='status-item'>{this.state.user}</span>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return state;
}

export default connect(mapStateToProps)(NavbarStatus);