import React from 'react';

interface IProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
    valueMin: number;
    valueMax: number;
    valueNow: number;
    progressBarLabel?: string;
    progressBarClassName?: string;
    show?: boolean;
}

const defaultProps: Partial<IProps> = {
    progressBarClassName: '',
    show: true,
    className: ''
};

export default function ProgressBar(props: IProps) {
    const {valueMin, valueMax, valueNow, progressBarClassName, progressBarLabel, show, className, ...restProps} = props;
    if (!show) { return null; }
    const valueNowInPercent = (valueMax > valueMin) ? ((valueNow - valueMin) / (valueMax - valueMin)) * 100 : NaN;
    const widthInPercent = valueNowInPercent > 100 ? 100 : (valueNowInPercent < 0 || isNaN(valueNowInPercent)) ? 0 : valueNowInPercent;
    return(
        <div className={`${className} progress`} {...restProps}>
            <div role="progressbar"
                className={`progress-bar ${progressBarClassName}`}
                aria-valuenow={valueNow}
                aria-valuemin={valueMin}
                aria-valuemax={valueMax}
                style={{width: `${widthInPercent}%`}} >
                <span className={`${progressBarLabel ? '' : 'sr-only'}`}>{progressBarLabel ? progressBarLabel : `${valueNowInPercent}% complete`}</span>
            </div>
        </div>
    );
}
ProgressBar.defaultProps = defaultProps;
