import React, { useEffect, useState, } from "react";
import { Logger } from "../../Utils/Logger";
export var ProgressBarSize;
(function (ProgressBarSize) {
    ProgressBarSize["Small"] = "small";
    ProgressBarSize["Medium"] = "medium";
    ProgressBarSize["Large"] = "large";
})(ProgressBarSize || (ProgressBarSize = {}));
const ProgressBar = (props) => {
    const [percent, setPercent] = useState(0);
    useEffect(() => {
        let percent = 0;
        try {
            percent = (props.count * 100) / props.totalCount;
        }
        catch (err) {
            Logger.error(err);
            // do nothing.
        }
        if (percent > 100) {
            percent = 100;
        }
        setPercent(Math.ceil(percent));
    }, [props.count, props.totalCount]);
    let progressBarSize = "h-4";
    if (props.size === ProgressBarSize.Small) {
        progressBarSize = "h-2.5";
    }
    else if (props.size === ProgressBarSize.Large) {
        progressBarSize = "h-6";
    }
    return (React.createElement("div", null,
        React.createElement("div", { className: "flex justify-between items-center mb-2" },
            React.createElement("div", { "data-testid": "progress-bar-count", className: "text-sm font-medium text-gray-700" },
                props.count,
                " of ",
                props.totalCount,
                " ",
                props.suffix),
            React.createElement("div", { className: "text-sm font-medium text-indigo-600" },
                percent,
                "%")),
        React.createElement("div", { className: `w-full ${progressBarSize} bg-gray-200 rounded-full overflow-hidden`, role: "progressbar", "aria-valuenow": percent, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Progress: ${props.count} of ${props.totalCount} ${props.suffix} (${percent}%)` },
            React.createElement("div", { "data-testid": "progress-bar", className: `${progressBarSize} bg-indigo-600 rounded-full transition-all duration-300 ease-out`, style: { width: percent + "%" } }))));
};
export default ProgressBar;
//# sourceMappingURL=ProgressBar.js.map