import { jsx, jsxs } from "react/jsx-runtime";
import { Icon, Padding, Spacing } from "@uipath/apollo-core";
import { Row } from "../../layouts/index.js";
import { Button } from "@uipath/apollo-wind";
import { memo } from "react";
import { ChecklistIcon } from "../../../icons/index.js";
import { EntryConditionIcon, ExitConditionIcon, ReturnToOriginIcon } from "../../icons/index.js";
import { CanvasIcon } from "../../utils/icon-registry.js";
import { CanvasTooltip } from "../CanvasTooltip.js";
import { ExecutionStatusIcon } from "../ExecutionStatusIcon/index.js";
import { getExecutionStatusColor } from "../ExecutionStatusIcon/ExecutionStatusIcon.js";
import { StageChip, StageHeader } from "./StageNode.styles.js";
import { StageHeaderChipType } from "./StageNode.types.js";
import { StageTitleInput } from "./StageTitleInput.js";
import { useExecutionStatusLabel } from "./useExecutionStatusLabel.js";
import { useStageNodeLabels } from "./useStageNodeLabels.js";
const SLA_ICON_CONFIG = {
    warning: {
        icon: 'triangle-alert',
        iconColor: 'var(--canvas-warning-icon)'
    },
    error: {
        icon: 'circle-alert',
        iconColor: 'var(--canvas-error-icon)'
    }
};
const CHIP_ICONS = {
    [StageHeaderChipType.Entry]: /*#__PURE__*/ jsx(EntryConditionIcon, {
        w: Icon.IconXs,
        h: Icon.IconXs
    }),
    [StageHeaderChipType.Exit]: /*#__PURE__*/ jsx(ExitConditionIcon, {
        w: Icon.IconXs,
        h: Icon.IconXs
    }),
    [StageHeaderChipType.Completion]: /*#__PURE__*/ jsx(ChecklistIcon, {
        size: 16
    }),
    [StageHeaderChipType.ReturnToOrigin]: /*#__PURE__*/ jsx(ReturnToOriginIcon, {
        w: Icon.IconXs,
        h: Icon.IconXs
    }),
    [StageHeaderChipType.Optional]: null,
    [StageHeaderChipType.EndsCase]: null
};
const STATUS_BADGE_CONFIG = {
    [StageHeaderChipType.Optional]: {
        className: 'bg-background-secondary text-foreground-muted',
        hoverClassName: 'hover:bg-background-secondary/80',
        testId: 'optional',
        labelKey: 'optionalBadge'
    },
    [StageHeaderChipType.EndsCase]: {
        className: 'bg-error-icon text-foreground-inverse',
        hoverClassName: 'hover:bg-error-icon/80',
        testId: 'ends-case',
        labelKey: 'endsCaseBadge'
    }
};
const STATUS_BADGE_BASE_CLASS = 'inline-flex h-6 items-center justify-center whitespace-nowrap rounded-[10px] border border-transparent px-2 text-xs font-normal';
const StageStatusBadge = ({ label, tooltip, className, hoverClassName, testId, onClick })=>{
    const badge = onClick ? /*#__PURE__*/ jsx("button", {
        type: "button",
        "data-testid": testId,
        onClick: (e)=>{
            e.stopPropagation();
            onClick();
        },
        className: `${STATUS_BADGE_BASE_CLASS} ${className} ${hoverClassName} cursor-pointer transition-colors focus-visible:outline-2 focus-visible:outline-offset-2`,
        children: label
    }) : /*#__PURE__*/ jsx("span", {
        "data-testid": testId,
        className: `${STATUS_BADGE_BASE_CLASS} ${className}`,
        children: label
    });
    if (tooltip) return /*#__PURE__*/ jsx(CanvasTooltip, {
        placement: "bottom",
        content: tooltip,
        children: badge
    });
    return badge;
};
const StageNodeHeaderInner = ({ props, isReadOnly, isException, status, handleTaskAddClick })=>{
    const labels = useStageNodeLabels();
    const getStatusName = useExecutionStatusLabel();
    const { id, stageDetails, execution, onStatusClick, onTaskAdd, onAddTaskFromToolbox, onStageTitleChange, loadingTaskIds } = props;
    const isAddTaskDisabled = (loadingTaskIds?.size ?? 0) > 0;
    const icon = stageDetails?.icon;
    const statusLabel = execution?.stageStatus?.label;
    const stageDuration = execution?.stageStatus?.duration;
    const slaText = execution?.stageStatus?.slaText;
    const slaIcon = execution?.stageStatus?.slaIcon;
    const slaIndicator = slaIcon ? SLA_ICON_CONFIG[slaIcon] : void 0;
    const statusFallbackName = status ? getStatusName(status) : '';
    const statusTooltip = statusLabel || statusFallbackName;
    return /*#__PURE__*/ jsxs(StageHeader, {
        isException: isException,
        "data-testid": `stage-header-${id}`,
        children: [
            /*#__PURE__*/ jsxs("div", {
                className: "flex items-start justify-between gap-1",
                children: [
                    /*#__PURE__*/ jsxs(Row, {
                        gap: Spacing.SpacingMicro,
                        align: "center",
                        flex: 1,
                        minW: 0,
                        children: [
                            icon,
                            /*#__PURE__*/ jsx(StageTitleInput, {
                                stageId: id,
                                label: stageDetails.label,
                                onChange: isReadOnly ? void 0 : onStageTitleChange,
                                className: "flex-1 min-w-0"
                            })
                        ]
                    }),
                    /*#__PURE__*/ jsxs(Row, {
                        gap: Spacing.SpacingMicro,
                        align: "start",
                        py: Padding.PadS,
                        children: [
                            status && /*#__PURE__*/ jsx(CanvasTooltip, {
                                content: statusTooltip,
                                placement: "top",
                                children: /*#__PURE__*/ jsx(Button, {
                                    variant: "ghost",
                                    size: "icon",
                                    className: "h-6 w-6",
                                    "aria-label": statusTooltip,
                                    "data-testid": `stage-status-${id}`,
                                    onClick: onStatusClick ? (e)=>{
                                        e.stopPropagation();
                                        onStatusClick();
                                    } : void 0,
                                    children: 'NotExecuted' === status ? /*#__PURE__*/ jsx(CanvasIcon, {
                                        icon: "hourglass",
                                        size: 20,
                                        color: getExecutionStatusColor('NotExecuted')
                                    }) : /*#__PURE__*/ jsx(ExecutionStatusIcon, {
                                        status: status,
                                        size: 20
                                    })
                                })
                            }),
                            (onTaskAdd || onAddTaskFromToolbox) && !isReadOnly && /*#__PURE__*/ jsx(CanvasTooltip, {
                                content: labels.addTask,
                                placement: "top",
                                children: /*#__PURE__*/ jsx(Button, {
                                    variant: "ghost",
                                    size: "icon",
                                    className: "h-6 w-6",
                                    onClick: handleTaskAddClick,
                                    "aria-label": labels.addTask,
                                    disabled: isAddTaskDisabled,
                                    children: /*#__PURE__*/ jsx(CanvasIcon, {
                                        icon: "plus",
                                        size: 20
                                    })
                                })
                            })
                        ]
                    })
                ]
            }),
            (slaText || stageDetails.headerChips && stageDetails.headerChips.length > 0) && /*#__PURE__*/ jsxs("div", {
                className: "flex min-h-8 flex-wrap items-center justify-between gap-x-2 gap-y-2",
                children: [
                    slaText && /*#__PURE__*/ jsxs("span", {
                        className: "inline-flex items-center gap-1 text-xs text-foreground-muted",
                        "data-testid": `stage-sla-${id}`,
                        "data-sla-icon": slaIcon,
                        children: [
                            slaIndicator && /*#__PURE__*/ jsx(CanvasIcon, {
                                icon: slaIndicator.icon,
                                size: 16,
                                color: slaIndicator.iconColor
                            }),
                            slaText
                        ]
                    }),
                    stageDetails.headerChips && stageDetails.headerChips.length > 0 && /*#__PURE__*/ jsx("div", {
                        className: "flex flex-wrap items-center gap-x-1 gap-y-2",
                        children: stageDetails.headerChips.map((chip)=>{
                            const statusBadge = STATUS_BADGE_CONFIG[chip.type];
                            if (statusBadge) return /*#__PURE__*/ jsx(StageStatusBadge, {
                                testId: `stage-${statusBadge.testId}-badge-${id}`,
                                className: statusBadge.className,
                                hoverClassName: statusBadge.hoverClassName,
                                label: chip.label || labels[statusBadge.labelKey],
                                tooltip: chip.tooltip,
                                onClick: chip.onClick
                            }, chip.type);
                            const button = /*#__PURE__*/ jsxs(StageChip, {
                                type: "button",
                                "aria-label": 'string' == typeof chip.tooltip ? chip.tooltip : chip.type,
                                onClick: (e)=>{
                                    e.stopPropagation();
                                    chip.onClick?.();
                                },
                                children: [
                                    CHIP_ICONS[chip.type],
                                    void 0 !== chip.count && /*#__PURE__*/ jsx("span", {
                                        className: "text-xs",
                                        children: chip.count
                                    })
                                ]
                            }, chip.type);
                            if (chip.tooltip) return /*#__PURE__*/ jsx(CanvasTooltip, {
                                placement: "bottom",
                                content: chip.tooltip,
                                children: button
                            }, chip.type);
                            return button;
                        })
                    })
                ]
            }),
            stageDuration && /*#__PURE__*/ jsx("span", {
                className: "flex min-h-8 items-center text-xs text-foreground-muted",
                children: stageDuration
            })
        ]
    });
};
const StageNodeHeader = /*#__PURE__*/ memo(StageNodeHeaderInner);
export { StageNodeHeader };
