const { connect } = require('preact-redux');
const preact = require('preact');

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(
    function receiveState(state) {
        const {
            account,
            ping,
        } = state;

        return {
            account,
            ping,
        };
    },
    function receiveDispatch(dispatch) {
        function accountPage() {
            return dispatch(actions.setNav('account'));
        }

        return {
            accountPage,
        };
    }
);


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

    if (!account) return null;

    return (
        <div class="account-status">
            <div class="account-info">
                <h2 class="account-header">{account.name}</h2>
                {saw(pingColour(ping))}
                <div class="ping-text">{ping}ms</div>
            </div>
            <h3 class="account-header credits">{`¤${account.balance}`}</h3>
            <button onClick={() => accountPage()}>⚙ account</button>
        </div>
    );
}

module.exports = addState(AccountStatus);