import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useMemo, useRef, useState, } from "react";
import Styles from "./ProgressBar.module.scss";
/**
 * A visual indicator that shows how much of a task is complete.
 * It displays a bar that fills up from 0 to 100 percent.
 */
export default function ProgressBar({ progress, indicatorRef, bodyRef, ...props }) {
    if (props.mode === "sections") {
        const ref = useRef(null);
        const strokeID = useMemo(() => `stroke-${(Math.random() * 100000).toFixed(0)}`, []);
        const height = props.size;
        const [width, setWidth] = useState(0);
        const dashWidth = width / props.sections;
        const spacing = dashWidth * 0.2;
        useEffect(() => {
            setWidth(ref.current.clientWidth);
        }, []);
        return (_jsxs("svg", { ref: ref, viewBox: `${-height / 2} 0 ${width + height - spacing} ${height}`, preserveAspectRatio: "none", width: "100%", height: `${height}px`, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: `${strokeID}`, x1: "0%", y1: "0%", x2: "100%", y2: "0%", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0%", "stop-color": "blue" }), _jsx("stop", { offset: `${progress}%`, "stop-color": "blue" }), _jsx("stop", { offset: `${progress}%`, "stop-color": "green" }), _jsx("stop", { offset: "100%", "stop-color": "green" })] }) }), _jsx("line", { x1: "0", y1: height / 2, x2: width, y2: height / 2, stroke: `url(#${strokeID})`, "stroke-width": height, "stroke-dasharray": `${dashWidth - spacing},${spacing}`, "stroke-linecap": "round" })] }));
    }
    const mode = props.mode || "guide";
    const size = props.size;
    return (_jsxs("div", { className: `${Styles.container} ${Styles[mode]} ${progress === 100 ? Styles.completed : ""}`, style: { fontSize: size }, ref: bodyRef, children: [_jsx("span", { style: { width: `${progress}%` } }), mode === "guide" && (_jsx("span", { ref: indicatorRef, style: { left: `${progress}%` } }))] }));
}
export function BalancedProgressBar({ min, max, current, size, ...props }) {
    const progress = useMemo(() => {
        const progressVal = current - min;
        const maxVal = max - min;
        const currProgress = (progressVal * 100) / maxVal;
        return currProgress;
    }, [min, max, current]);
    return _jsx(ProgressBar, { size: size, progress: progress, ...props });
}
//# sourceMappingURL=ProgressBar.js.map