"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_styles_1 = require("@patternfly/react-styles");
const topology_pipelines_1 = tslib_1.__importDefault(require("../../../css/topology-pipelines"));
const topology_components_1 = tslib_1.__importDefault(require("../../../css/topology-components"));
const react_core_1 = require("@patternfly/react-core");
const mobx_exports_1 = require("../../../mobx-exports");
const types_1 = require("../../../types");
const types_2 = require("../../types");
const truncate_middle_1 = require("../../../utils/truncate-middle");
const utils_1 = require("../../../utils");
const utils_2 = require("../../utils");
const StatusIcon_1 = tslib_1.__importDefault(require("../../utils/StatusIcon"));
const LabelActionIcon_1 = tslib_1.__importDefault(require("../../../components/nodes/labels/LabelActionIcon"));
const LabelContextMenu_1 = tslib_1.__importDefault(require("../../../components/nodes/labels/LabelContextMenu"));
const NodeShadows_1 = tslib_1.__importStar(require("../../../components/nodes/NodeShadows"));
const LabelBadge_1 = tslib_1.__importDefault(require("../../../components/nodes/labels/LabelBadge"));
const LabelIcon_1 = tslib_1.__importDefault(require("../../../components/nodes/labels/LabelIcon"));
const layouts_1 = require("../../../layouts");
const STATUS_ICON_SIZE = 16;
const TaskPill = (0, mobx_exports_1.observer)(({ element, taskRef, pillRef, className, width = 0, paddingX = 8, paddingY = 8, status, statusIconSize = STATUS_ICON_SIZE, showStatusState = true, scaleNode, hideDetailsAtMedium, hiddenDetailsShownStatuses = [types_2.RunStatus.Failed, types_2.RunStatus.FailedToStart, types_2.RunStatus.Cancelled], leadIcon, badge, badgeColor, badgeTextColor, badgeBorderColor, badgeClassName = topology_pipelines_1.default.topologyPipelinesPillBadge, badgeTooltip, badgePopoverParams, customStatusIcon, nameLabelClass, taskIconClass, taskIcon, taskIconTooltip, taskIconPadding = 4, hover, truncateLength = 14, disableTooltip = false, selected, onSelect, onContextMenu, contextMenuOpen, hideContextMenuKebab, actionIcon, actionIconClassName, onActionIconClick, shadowCount = 0, shadowOffset = 8, children, x, y }) => {
    var _a, _b, _c, _d, _e, _f, _g;
    const [hovered] = (0, utils_1.useHover)();
    const taskIconComponentRef = (0, react_1.useRef)(null);
    const isHover = hover !== undefined ? hover : hovered;
    const label = (0, truncate_middle_1.truncateMiddle)(element.getLabel(), { length: truncateLength, omission: '...' });
    const [textSize, textRef] = (0, utils_1.useSize)([label, className]);
    const nameLabelTriggerRef = (0, react_1.useRef)(null);
    const nameLabelRef = (0, utils_1.useCombineRefs)(textRef, nameLabelTriggerRef);
    const [statusSize, statusRef] = (0, utils_1.useSize)([status, showStatusState, statusIconSize]);
    const [leadSize, leadIconRef] = (0, utils_1.useSize)([leadIcon]);
    const [badgeSize, badgeRef] = (0, utils_1.useSize)([badge]);
    const badgeLabelTriggerRef = (0, react_1.useRef)(null);
    const [actionSize, actionRef] = (0, utils_1.useSize)([actionIcon, paddingX]);
    const [contextSize, contextRef] = (0, utils_1.useSize)([onContextMenu, paddingX]);
    const detailsLevel = element.getGraph().getDetailsLevel();
    const verticalLayout = ((_c = (_b = (_a = element.getGraph()).getLayoutOptions) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.rankdir) === layouts_1.TOP_TO_BOTTOM;
    const textWidth = (_d = textSize === null || textSize === void 0 ? void 0 : textSize.width) !== null && _d !== void 0 ? _d : 0;
    const textHeight = (_e = textSize === null || textSize === void 0 ? void 0 : textSize.height) !== null && _e !== void 0 ? _e : 0;
    const { height, statusStartX, textStartX, actionStartX, contextStartX, pillWidth, badgeStartX, iconWidth, iconStartX, leadIconStartX, offsetX } = (0, react_1.useMemo)(() => {
        if (!textSize) {
            return {
                height: 0,
                statusStartX: 0,
                textStartX: 0,
                actionStartX: 0,
                contextStartX: 0,
                pillWidth: 0,
                badgeStartX: 0,
                iconWidth: 0,
                iconStartX: 0,
                leadIconStartX: 0,
                offsetX: 0
            };
        }
        const height = textHeight + 2 * paddingY;
        const startX = paddingX + paddingX / 2;
        const iconWidth = taskIconClass || taskIcon ? height - taskIconPadding : 0;
        const iconStartX = -(iconWidth * 0.75);
        const statusStartX = startX - statusIconSize / 4; // Adjust for icon padding
        const statusSpace = status && showStatusState && statusSize ? statusSize.width + paddingX : 0;
        const leadIconStartX = startX + statusSpace;
        const leadIconSpace = leadIcon ? leadSize.width + paddingX : 0;
        const textStartX = leadIconStartX + leadIconSpace;
        const textSpace = textWidth + paddingX;
        const badgeStartX = textStartX + textSpace;
        const badgeSpace = badge && badgeSize ? badgeSize.width + paddingX : 0;
        const actionStartX = badgeStartX + badgeSpace;
        const actionSpace = actionIcon && actionSize ? actionSize.width + paddingX : 0;
        const contextStartX = actionStartX + actionSpace;
        const contextSpace = !hideContextMenuKebab && onContextMenu && contextSize ? contextSize.width + paddingX / 2 : 0;
        const pillWidth = contextStartX + contextSpace + paddingX / 2;
        const offsetX = verticalLayout ? (width - pillWidth) / 2 : 0;
        return {
            height,
            statusStartX,
            textStartX,
            actionStartX,
            contextStartX,
            badgeStartX,
            iconWidth,
            iconStartX,
            leadIconStartX,
            pillWidth,
            offsetX
        };
    }, [
        textSize,
        textHeight,
        textWidth,
        paddingY,
        paddingX,
        taskIconClass,
        taskIcon,
        taskIconPadding,
        statusIconSize,
        status,
        showStatusState,
        leadSize,
        leadIcon,
        statusSize,
        badgeSize,
        badge,
        actionIcon,
        actionSize,
        hideContextMenuKebab,
        onContextMenu,
        contextSize,
        verticalLayout,
        width
    ]);
    const scale = element.getGraph().getScale();
    const nameLabel = ((0, jsx_runtime_1.jsx)("text", Object.assign({ x: offsetX, ref: nameLabelRef, className: (0, react_styles_1.css)(nameLabelClass, topology_pipelines_1.default.topologyPipelinesPillText), dominantBaseline: "middle" }, { children: label })));
    const runStatusModifier = (0, utils_2.getRunStatusModifier)(status);
    const pillClasses = (0, react_styles_1.css)(topology_pipelines_1.default.topologyPipelinesPill, className, isHover && topology_pipelines_1.default.modifiers.hover, runStatusModifier, selected && topology_pipelines_1.default.modifiers.selected, onSelect && topology_pipelines_1.default.modifiers.selectable);
    // Force an update of the given pillRef when dependencies change
    const pillUpdatedRef = (0, react_1.useCallback)((node) => {
        pillRef(node);
    }, 
    // dependencies causing the pill rect to resize
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [pillClasses, width, height]);
    let filter;
    if (runStatusModifier === topology_pipelines_1.default.modifiers.danger) {
        filter = (0, utils_1.createSvgIdUrl)(NodeShadows_1.NODE_SHADOW_FILTER_ID_DANGER);
    }
    else if (isHover && !utils_2.nonShadowModifiers.includes(runStatusModifier)) {
        filter = (0, utils_1.createSvgIdUrl)(NodeShadows_1.NODE_SHADOW_FILTER_ID_HOVER);
    }
    const taskIconComponent = (taskIconClass || taskIcon) && ((0, jsx_runtime_1.jsx)(LabelIcon_1.default, { x: offsetX + iconStartX + iconWidth, y: (height - iconWidth) / 2, width: iconWidth, height: iconWidth, iconClass: taskIconClass, icon: taskIcon, padding: taskIconPadding, innerRef: taskIconComponentRef }));
    const badgeLabel = badge ? ((0, jsx_runtime_1.jsx)(LabelBadge_1.default, { ref: badgeRef, innerRef: badgeLabelTriggerRef, x: offsetX + badgeStartX, y: (height - ((_f = badgeSize === null || badgeSize === void 0 ? void 0 : badgeSize.height) !== null && _f !== void 0 ? _f : 0)) / 2, badge: badge, badgeClassName: badgeClassName, badgeColor: badgeColor, badgeTextColor: badgeTextColor, badgeBorderColor: badgeBorderColor })) : null;
    let badgeComponent;
    if (badgeLabel && badgeTooltip) {
        badgeComponent = ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, Object.assign({ triggerRef: badgeLabelTriggerRef, content: badgeTooltip }, { children: badgeLabel })));
    }
    else if (badgeLabel && badgePopoverParams) {
        badgeComponent = ((0, jsx_runtime_1.jsx)("g", Object.assign({ onClick: (e) => e.stopPropagation() }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Popover, Object.assign({ triggerRef: badgeLabelTriggerRef }, badgePopoverParams, { children: badgeLabel })) })));
    }
    else {
        badgeComponent = badgeLabel;
    }
    if (showStatusState && !scaleNode && hideDetailsAtMedium && detailsLevel !== types_1.ScaleDetailsLevel.high) {
        const statusBackgroundRadius = statusIconSize / 2 + 4;
        const upScale = 1 / scale;
        const { height: boundsHeight } = element.getBounds();
        const translateX = verticalLayout ? width / 2 - statusBackgroundRadius * upScale : 0;
        const translateY = verticalLayout ? 0 : (boundsHeight - statusBackgroundRadius * 2 * upScale) / 2;
        return ((0, jsx_runtime_1.jsxs)("g", Object.assign({ transform: `translate(${translateX}, ${translateY}) scale(${upScale})`, ref: taskRef }, { children: [(0, jsx_runtime_1.jsx)("circle", { className: (0, react_styles_1.css)(topology_pipelines_1.default.topologyPipelinesStatusIconBackground, topology_pipelines_1.default.topologyPipelinesPillStatus, runStatusModifier, selected && 'pf-m-selected'), cx: statusBackgroundRadius, cy: statusBackgroundRadius, r: statusBackgroundRadius }), status && (!hiddenDetailsShownStatuses || hiddenDetailsShownStatuses.includes(status)) ? ((0, jsx_runtime_1.jsx)("g", Object.assign({ transform: `translate(4, 4)` }, { children: (0, jsx_runtime_1.jsx)("g", Object.assign({ className: (0, react_styles_1.css)(topology_pipelines_1.default.topologyPipelinesStatusIcon, runStatusModifier, selected && 'pf-m-selected', (status === types_2.RunStatus.Running || status === types_2.RunStatus.InProgress) && topology_pipelines_1.default.modifiers.spin) }, { children: customStatusIcon !== null && customStatusIcon !== void 0 ? customStatusIcon : (0, jsx_runtime_1.jsx)(StatusIcon_1.default, { status: status }) })) }))) : null] })));
    }
    const shadows = [];
    for (let i = shadowCount; i > 0; i--) {
        shadows.push((0, jsx_runtime_1.jsx)("rect", { x: offsetX + shadowOffset * i, y: 0, width: pillWidth, height: height, rx: height / 2, className: (0, react_styles_1.css)(topology_components_1.default.topologyNodeBackground, 'pf-m-disabled'), filter: filter }, `shadow-offset-${i}`));
    }
    return ((0, jsx_runtime_1.jsxs)("g", Object.assign({ className: pillClasses, transform: `translate(${x},${y})`, onClick: onSelect, onContextMenu: onContextMenu, ref: taskRef }, { children: [(0, jsx_runtime_1.jsx)(NodeShadows_1.default, {}), shadows, (0, jsx_runtime_1.jsx)("rect", { x: offsetX, y: 0, width: pillWidth, ref: pillUpdatedRef, height: height, rx: height / 2, className: (0, react_styles_1.css)(topology_pipelines_1.default.topologyPipelinesPillBackground), filter: filter }), (0, jsx_runtime_1.jsx)("g", Object.assign({ transform: `translate(${textStartX}, ${paddingY + textHeight / 2 + 1})` }, { children: element.getLabel() !== label && !disableTooltip ? ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, Object.assign({ triggerRef: nameLabelTriggerRef, content: element.getLabel() }, { children: (0, jsx_runtime_1.jsx)("g", { children: nameLabel }) }))) : (nameLabel) })), status && showStatusState && ((0, jsx_runtime_1.jsx)("g", Object.assign({ transform: `translate(${offsetX + statusStartX + paddingX / 2}, ${(height - statusIconSize) / 2})`, ref: statusRef }, { children: (0, jsx_runtime_1.jsx)("g", Object.assign({ className: (0, react_styles_1.css)(topology_pipelines_1.default.topologyPipelinesPillStatus, runStatusModifier, selected && 'pf-m-selected', (status === types_2.RunStatus.Running || status === types_2.RunStatus.InProgress) && topology_pipelines_1.default.modifiers.spin) }, { children: customStatusIcon !== null && customStatusIcon !== void 0 ? customStatusIcon : (0, jsx_runtime_1.jsx)(StatusIcon_1.default, { status: status }) })) }))), leadIcon && ((0, jsx_runtime_1.jsx)("g", Object.assign({ transform: `translate(${offsetX + leadIconStartX}, ${((_g = height - (leadSize === null || leadSize === void 0 ? void 0 : leadSize.height)) !== null && _g !== void 0 ? _g : 0) / 2})`, ref: leadIconRef }, { children: leadIcon }))), taskIconComponent &&
                (taskIconTooltip ? ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, Object.assign({ triggerRef: taskIconComponentRef, content: taskIconTooltip }, { children: taskIconComponent }))) : (taskIconComponent)), badgeComponent, actionIcon && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("line", { className: (0, react_styles_1.css)(topology_components_1.default.topologyNodeSeparator), x1: offsetX + actionStartX, y1: 0, x2: offsetX + actionStartX, y2: height, shapeRendering: "crispEdges" }), (0, jsx_runtime_1.jsx)(LabelActionIcon_1.default, { ref: actionRef, x: offsetX + actionStartX, y: 0, height: height, paddingX: paddingX, paddingY: 0, icon: actionIcon, className: actionIconClassName, onClick: onActionIconClick })] })), textSize && onContextMenu && !hideContextMenuKebab && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("line", { className: (0, react_styles_1.css)(topology_components_1.default.topologyNodeSeparator), x1: offsetX + contextStartX, y1: 0, x2: offsetX + contextStartX, y2: height, shapeRendering: "crispEdges" }), (0, jsx_runtime_1.jsx)(LabelContextMenu_1.default, { ref: contextRef, x: offsetX + contextStartX, y: 0, height: height, paddingX: paddingX, paddingY: 0, onContextMenu: onContextMenu, contextMenuOpen: contextMenuOpen })] })), children] })));
});
exports.default = TaskPill;
//# sourceMappingURL=TaskPill.js.map