import React, { FC } from 'react';
import cx from 'classnames';
import { formatPercentage } from 'src/utils/formatNumber';

export const CLASSNAME = 'ProgressBar';

export interface Props {
    className?: string;
    progressBarClassName?: string;
    showPercentage?: boolean;
    showBar?: boolean;
    value: number;
    index: number;
}

const ProgressBar: FC<Props> = ({
    progressBarClassName,
    className,
    showPercentage = true,
    showBar = true,
    value,
    index,
}) => {
    if (!Number.isFinite(value)) return null;

    const width = Math.min(Math.max(0, value), 1);
    const style = { width: formatPercentage(width) };
    const percentageClassName = cx(
        `${CLASSNAME}-percentage`,
        `color-dataviz-${index}`,
        { [`${CLASSNAME}-percentage-only`]: !showBar }
    );
    const progressClassName = cx(`${CLASSNAME}-bar`, `bg-dataviz-${index}`, progressBarClassName);

    return (
        <div className={cx(CLASSNAME, className)}>
            {showPercentage && <div className={percentageClassName}>{style.width}</div>}
            {
                showBar && (
                    <div className={`${CLASSNAME}-container`}>
                        <div className={progressClassName} style={style} />
                    </div>
                )
            }
        </div>
    );
};

export default ProgressBar;