import * as React from 'react';
import { FunctionComponent } from 'react';
import { CLOCK_LOW_TIME_MS, formatClock, getColorByBrightness } from "@mancala/core";
import { Context } from '../context/context';

// Readable on every theme; the themes have no warning color of their own.
const LOW_TIME_COLOR = "#b3261e";
const LOW_TIME_TEXT_COLOR = "#ffffff";

// One player's clock: highlighted while it runs, in a warning color when the running clock is low.
const GameClockView: FunctionComponent<{
    context: Context,
    timeMs: number,
    running: boolean,
}> = ({ context, timeMs, running }) => {
    const theme = context.themeManager.theme;
    const lowTime = running && timeMs < CLOCK_LOW_TIME_MS;
    const background = lowTime ? LOW_TIME_COLOR : running ? theme.playerTurnColor : "transparent";
    const color = lowTime ? LOW_TIME_TEXT_COLOR : running
        ? getColorByBrightness(theme.playerTurnColor, theme.textColor, theme.textLightColor)
        : getColorByBrightness(theme.background, theme.textColor, theme.textLightColor);
    return (
        <span className="clock" style={{ background, color }} role="timer">
            {formatClock(timeMs)}
            <style jsx>{`
                .clock {
                    padding: 2px 10px;
                    border-radius: 30px;
                    border: 2px solid ${theme.boardColor};
                    font-weight: bold;
                    font-variant-numeric: tabular-nums;
                    white-space: nowrap;
                    transition: background-color 0.5s, color 0.5s;
                }
            `}</style>
        </span>
    );
}

export default GameClockView;