import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import './ProgressBar.scss';
import Typography from '../Typography';
import Tooltip from '../Tooltip';
import { isTextTruncated, truncateText, } from '../../utils/truncateText/truncateText';
const ProgressBar = ({ progressPercentage, totalMemory, usedMemory, color = 'var(--brand-color)', trackColor = '#f0f0f0', height = 10, label, labelFontSize = 12, labelTextColor = 'var(--ff-card-status-text-color)', showPercentage = false, percentageFontSize = 10, percentageTextColor = 'var(--tooltip-text-color)', progressBarWidth = '200px', }) => {
    const convertMemoryToMB = (memory) => {
        const trimmed = memory.trim().toLowerCase();
        if (trimmed === '0')
            return 0;
        const match = trimmed.match(/^(\d+(?:\.\d+)?)\s*(kb|mb|gb)$/);
        if (!match || !match[1])
            return 0;
        const value = parseFloat(match[1]);
        const unit = match[2];
        if (unit === 'gb') {
            return value * 1024;
        }
        else if (unit === 'kb') {
            return value / 1024;
        }
        else {
            return value;
        }
    };
    let computedProgress = 0;
    let computedLabel = label;
    if (totalMemory !== undefined && usedMemory !== undefined) {
        const usedMB = convertMemoryToMB(usedMemory);
        const totalMB = convertMemoryToMB(totalMemory);
        if (totalMB > 0) {
            computedProgress = (usedMB / totalMB) * 100;
            computedLabel = label || usedMemory;
        }
        else {
            computedProgress = 0;
            computedLabel = '0MB';
        }
    }
    else {
        computedProgress = progressPercentage || 0;
    }
    // Ensure progress is between 0 and 100
    const validProgress = Math.max(0, Math.min(computedProgress, 100));
    // Bar style for the filled part
    const barStyle = {
        width: `${validProgress}%`,
        backgroundColor: color,
        height: `${height}px`,
    };
    // Track style for the empty part of the progress bar
    const trackStyle = {
        backgroundColor: trackColor,
        height: `${height}px`,
    };
    const containerStyle = {
        width: progressBarWidth,
    };
    return (_jsxs("div", { className: `ff-progress-bar-container ${computedLabel ? 'ff-has-label' : ''}`, style: containerStyle, children: [_jsx("div", { className: "ff-progress-bar-track", style: trackStyle, children: _jsx("div", { className: "ff-progress-bar", style: barStyle, children: showPercentage && (_jsx(Typography, { className: "ff-progress-bar-percentage", fontSize: percentageFontSize, color: percentageTextColor, children: `${Math.round(validProgress)}%` })) }) }), computedLabel && (_jsx("div", { className: "ff-progress-bar-label", children: _jsx(Typography, { fontSize: labelFontSize, color: labelTextColor, children: _jsx(Tooltip, { title: isTextTruncated(computedLabel, 10, 'count') ? computedLabel : '', children: truncateText(computedLabel, 10, 'count') }) }) }))] }));
};
export default ProgressBar;
//# sourceMappingURL=ProgressBar.js.map