// eslint-disable-next-line
const preact = require('preact');
const { connect } = require('preact-redux');

const { saw } = require('./shapes');
const actions = require('./../actions');

function pingColour(ping) {
    if (ping < 100) return 'forestgreen';
    if (ping < 200) return 'yellow';
    return 'red';
}

const addState = connect(
    ({ account, ping, showNav }) => {
        return { account, ping };
    },
);

function renderHeader(args) {
    const { account, ping } = args;

    const accountStatus = account
        ? (<div className="header-status">
            <h1 className="header-username">{account.name}</h1>
            {saw(pingColour(ping))}
            <div className="ping-text">{ping}ms</div>
        </div>)
        : '';

    return (
        <header>
            <h1 className="header-title">mnml.gg</h1>
            {accountStatus}
        </header>
    );
}


module.exports = addState(renderHeader);