"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RenderStepInstruction = exports.FlowSummaryDiv = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const Tooltip_1 = tslib_1.__importDefault(require("@material-ui/core/Tooltip"));
const FlowStepOutputInstructions_1 = require("@appglue/common/dist/Flow/Structure/FlowStepOutputInstructions");
const ErrorFlowIcon_1 = require("../../../CommonUI/Icon/ErrorFlowIcon");
const ErrorIcon_1 = require("../../../CommonUI/Icon/ErrorIcon");
const NoDataIcon_1 = require("../../../CommonUI/Icon/NoDataIcon");
const EndFlowIcon_1 = require("../../../CommonUI/Icon/EndFlowIcon");
const EndIcon_1 = require("../../../CommonUI/Icon/EndIcon");
const FlowConstants_1 = require("@appglue/common/dist/Flow/Utilities/FlowConstants");
const FlowUtilities_1 = require("@appglue/common/dist/Flow/Utilities/FlowUtilities");
exports.FlowSummaryDiv = styled_components_1.default.div `
    display: flex;
    flex-direction: row;
    align-items: center;
    ${(props) => !props.notEndAlign && `justify-content: flex-end;`}
    cursor: pointer;
    position: relative;

    label {
        position: absolute;
        top: 0;
        right: 100%;
        white-space: pre;
    }

    .step-path-name-error {
        font-style: normal;
        font-weight: 500;
        font-size: 10px;
        line-height: 140%;
        color: ${FlowConstants_1.FlowConstants.STEP_PATH_ERROR_COLOR};
        margin-left: 0px;

        text-transform: capitalize;
    }

    .step-path-error-message {
        display: flex;
        margin-left: 4px;
    }

    .step-path-name-end {
        font-style: normal;
        font-weight: 500;
        font-size: 10px;
        line-height: 140%;
        color: ${FlowConstants_1.FlowConstants.STEP_PATH_END_COLOR};
        margin-left: 0px;

        text-transform: capitalize;

        cursor: pointer;
    }
`;
const ExtraIconDiv = styled_components_1.default.div `
    position: absolute;
    left: 100%;
    top: 0;
    display: flex;
`;
const RenderStepInstruction = (props) => {
    const step = props.step ? props.step : props.editContext.flow.find(props.instruction.stepId);
    const onClick = (event) => {
        if (step) {
            props.editContext.setSelectedStepStrategy(event.currentTarget, step);
        }
    };
    if (!step)
        return null;
    let tooltipLabel = props.hiddenStepName && FlowUtilities_1.FlowUtilities.IsEndStep(step) ? props.hiddenStepName : props.instruction.pathName;
    let label = `${tooltipLabel.slice(0, FlowConstants_1.FlowConstants.MAX_CHARS_STEP_PATH_LABEL)}${tooltipLabel.length > FlowConstants_1.FlowConstants.MAX_CHARS_STEP_PATH_LABEL ? "..." : ""}`;
    if (props.instruction.strategy === FlowStepOutputInstructions_1.FlowStepOutputInstructionType.THROW_EXCEPTION) {
        return ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: tooltipLabel, children: (0, jsx_runtime_1.jsxs)(exports.FlowSummaryDiv, { onClick: onClick, children: [!props.hideLabel && (0, jsx_runtime_1.jsx)("label", { className: "step-path-name-error", children: label }), (0, jsx_runtime_1.jsx)(NoDataIcon_1.NoDataIcon, {}), (0, jsx_runtime_1.jsxs)(ExtraIconDiv, { id: props.instruction.getElementId(), children: [(0, jsx_runtime_1.jsx)(ErrorFlowIcon_1.ErrorFlowIcon, {}), (0, jsx_runtime_1.jsx)("div", { className: "step-path-error-message", children: (0, jsx_runtime_1.jsx)(ErrorIcon_1.ErrorIcon, {}) })] })] }) }));
    }
    if (props.instruction.strategy === FlowStepOutputInstructions_1.FlowStepOutputInstructionType.END_FLOW) {
        return ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: tooltipLabel, children: (0, jsx_runtime_1.jsxs)(exports.FlowSummaryDiv, { onClick: onClick, children: [!props.hideLabel && (0, jsx_runtime_1.jsx)("label", { className: "step-path-name-end", children: label }), (0, jsx_runtime_1.jsx)(EndIcon_1.EndIcon, {}), (0, jsx_runtime_1.jsx)(ExtraIconDiv, { id: props.instruction.getElementId(), children: (0, jsx_runtime_1.jsx)(EndFlowIcon_1.EndFlowIcon, {}) })] }) }));
    }
    if (props.instruction.strategy === FlowStepOutputInstructions_1.FlowStepOutputInstructionType.BRANCH) {
        if (FlowUtilities_1.FlowUtilities.IsEndStep(step) && !props.showHiddenBranch) {
            return null;
        }
        return ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: tooltipLabel, children: (0, jsx_runtime_1.jsxs)(exports.FlowSummaryDiv, { notEndAlign: true, onClick: onClick, children: [!props.hideLabel && (0, jsx_runtime_1.jsx)("label", { className: "step-path-name-end", children: label }), (0, jsx_runtime_1.jsx)("div", { id: props.instruction.getElementId() })] }) }));
    }
    return null;
};
exports.RenderStepInstruction = RenderStepInstruction;
//# sourceMappingURL=RenderStepInstruction.js.map