import React from 'react';

import classNames from 'classnames';

import * as styles from './styles/StatDisplay.scss';

export interface IStartDisplayProps {
    statLabel : string;
    statValue : number | null;
    statRank : number;
}

export class StatDisplay extends React.Component<IStartDisplayProps, object> {

    public render() {
        const {
            statLabel,
            statValue,
            statRank,
        } = this.props;

        const progressStatCss = classNames(
            'nes-progress',
            {
                'is-success': statRank > 66,
                'is-warning': statRank >= 34 && statRank <= 66,
                'is-error': statRank < 34,
            }
        );

        let spacer = ' ';
        let displayValue : number | string | null = statValue;
        if (statValue === null) {
            displayValue = '-';
            spacer += String.fromCharCode(160) + String.fromCharCode(160);
        } else if (statValue < 100) {
            spacer += String.fromCharCode(160);
        }

        return (
            <div className={ styles.baseStatRow }>
                <span>{ statLabel }{ spacer }{ displayValue }</span>
                <progress
                    className={ progressStatCss }
                    max={ 100 }
                    value={ statRank }
                    title={ `${statRank}%` }
                >
                    { statRank }%
                </progress>
            </div>
        );
    }
}