import { jsxs, jsx } from 'react/jsx-runtime';
import Typography from '../../Typography/Typography.js';
import Tooltip from '../../Tooltip/Tooltip.js';
import { truncateText } from '../../../utils/truncateText/truncateText.js';
import Icon from '../../Icon/Icon.js';
import { useMemo } from 'react';

const StepResultStats = ({ metaData, width = 0, displayIcon = false, }) => {
    const total = metaData?.total || 0;
    const statusList = [
        {
            name: 'Passed',
            count: metaData?.totalPassed,
            color: 'var(--status-approved-text-color)',
        },
        {
            name: 'Failed',
            count: metaData?.totalFailed,
            color: 'var(--status-rejected-text-color)',
        },
        {
            name: 'Warning',
            count: metaData?.totalWarning,
            color: 'var(--status-warning-text-color)',
        },
        {
            name: 'Skipped',
            count: metaData?.totalSkipped,
            color: 'var(--status-skipped-text-color)',
        },
        {
            name: 'Terminated',
            count: metaData?.totalTerminated,
            color: 'var(--status-skipped-text-color)',
        },
        {
            name: 'Aborted',
            count: metaData?.totalAborted,
            color: 'var(--status-skipped-text-color)',
        },
    ];
    // Filter only statuses with a count > 0
    const visibleStatuses = statusList.filter((item) => item.count > 0);
    // Full raw text (used in tooltip)
    const fullText = visibleStatuses
        .map(({ count, name }) => `${count}/${total} ${name}`)
        .join(' ');
    // Truncate entire line text based on provided width
    const truncatedText = width
        ? truncateText(fullText, width, 'pixel')
        : fullText;
    const STATUS_GROUPS = [
        ['Passed', 'Failed'],
        ['Warning', 'Skipped'],
    ];
    const normalizedStatusList = statusList.map((item) => ({
        ...item,
        count: item.count ?? 0,
    }));
    const tooltipTotal = normalizedStatusList.reduce((sum, { count }) => sum + count, 0);
    const hasAnyStatus = normalizedStatusList.some(({ count }) => count > 0);
    const tooltipStatusList = displayIcon ? normalizedStatusList : statusList;
    const groupedStatuses = STATUS_GROUPS.map((group) => tooltipStatusList.filter(({ name }) => group.includes(name)));
    const getStatusColor = (name, color) => name === 'Skipped' ? 'var(--status-skipped-bg-color)' : color;
    const tooltipContent = useMemo(() => (jsxs("div", { className: "ff-status-tooltip", children: [groupedStatuses.map((group, rowIndex) => (jsx("div", { className: "ff-status-tooltip-row", children: group.map(({ name, count, color }) => (jsxs("div", { className: "ff-status-item", children: [jsx("span", { className: "ff-status-dot", style: { backgroundColor: getStatusColor(name, color) } }), jsxs(Typography, { as: "span", fontWeight: "medium", fontSize: 10, className: "ff-status-result-tooltip-text", color: "var(--tooltip-text-color)", children: [name, ": ", count] })] }, name))) }, rowIndex))), jsx("div", { className: "ff-status-tooltip-divider" }), jsxs(Typography, { as: "span", fontWeight: "medium", fontSize: 10, className: "ff-status-tooltip-total", children: ["Total Steps - ", tooltipTotal] })] })), [groupedStatuses, tooltipTotal]);
    if (displayIcon) {
        return hasAnyStatus ? (jsx(Tooltip, { title: tooltipContent, children: jsx("span", { className: "ff-status-icon-wrapper", children: jsx(Icon, { name: "status_icon" }) }) })) : null;
    }
    // Break truncated text into colored segments
    const coloredSegments = [];
    let cursor = 0;
    for (const { count, name, color } of visibleStatuses) {
        const segmentText = `${count}/${total} ${name}`;
        if (cursor + segmentText.length <= truncatedText.length) {
            coloredSegments.push({ text: segmentText, color });
            cursor += segmentText.length + 1;
        }
        else {
            const remainingText = truncatedText.slice(cursor).trim();
            if (remainingText) {
                coloredSegments.push({ text: remainingText, color });
            }
            break;
        }
    }
    return (jsx("div", { className: "ff-stepResultStats", children: jsx(Tooltip, { title: fullText, children: jsx(Typography, { as: "div", className: "status-inline-text", fontWeight: "semi-bold", children: coloredSegments.map(({ text, color }, index) => (jsx(Typography, { as: "span", fontWeight: "semi-bold", style: { color, whiteSpace: 'nowrap' }, children: text + ' ' }, index))) }) }) }));
};

export { StepResultStats as default };
//# sourceMappingURL=StepResultStats.js.map
