import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Tooltip } from "@material-ui/core";
import { IInjectTopItemType } from "../../../CommonUI/BuildUI/Topbar";
import { BranchIcon } from "../../../CommonUI/Icon/BranchIcon";
import { CollapseAllIcon } from "../../../CommonUI/Icon/CollapseAllIcon";
import { DescriptionGrayIcon } from "../../../CommonUI/Icon/DescriptionGrayIcon";
import { ErrorBranchIcon } from "../../../CommonUI/Icon/ErrorBranchIcon";
import { ExpandAllIcon } from "../../../CommonUI/Icon/ExpandAllIcon";
import { FlowConstants } from "../../CommonUI/FlowConstants";
import { OffDiv, OnDiv } from "../../DesignerUI/CommonStyles";
import { RegularSequenceContent } from "../../DesignerUI/Regular/FlowStackContent";
import { RegularSequenceActions } from "../../DesignerUI/Regular/SequenceActions";
import { RegularSequenceStrategy } from "../../DesignerUI/Regular/SequenceStrategy";
import { RegularSequenceTitle } from "../../DesignerUI/Regular/SequenceTitle";
import { RegularStepStrategy } from "../../DesignerUI/Regular/StepStrategy";
import { CandidateSequence } from "../CandidateSequence";
import { FlowStepOutputInstructionType } from "../FlowStepOutputInstructions";
import { BaseDisplayBehavior } from "./BaseDisplayBehavior";
export class SequenceDisplayBehavior extends BaseDisplayBehavior {
    getShowTopItems() {
        return {
            label: "Show",
            type: IInjectTopItemType.ICONBUTTONGROUP,
            onSelect: (value) => {
                switch (value) {
                    case "description":
                        this.editContext.isShowDescription = !this.editContext.isShowDescription;
                        break;
                    case "collapse":
                        this.editContext.isCollapsed = !this.editContext.isCollapsed;
                        break;
                }
            },
            items: [
                {
                    value: "description",
                    label: "Show / Hide All Description",
                    icon: _jsx(DescriptionGrayIcon, {}, void 0),
                    isSelected: () => {
                        return this.editContext.isShowDescription;
                    },
                    belowLabel: this.editContext.isShowDescription ? _jsx(OnDiv, { children: "on" }, void 0) : _jsx(OffDiv, { children: "off" }, void 0),
                },
                {
                    value: "error_branch",
                    label: "Show Error and End Connections",
                    icon: _jsx(ErrorBranchIcon, {}, void 0),
                    isSelected: () => {
                        return this.editContext.isShowErrorBranch;
                    },
                    belowLabel: this.editContext.isShowErrorBranch ? _jsx(OnDiv, { children: "on" }, void 0) : _jsx(OffDiv, { children: "off" }, void 0),
                    onMouseDown: () => {
                        this.editContext.isShowErrorBranch = true;
                    },
                    onMouseUp: () => {
                        this.editContext.isShowErrorBranch = false;
                    },
                },
                {
                    value: "collapse",
                    label: "Collapse / Expand all sequences",
                    icon: this.editContext.isCollapsed ? _jsx(ExpandAllIcon, {}, void 0) : _jsx(CollapseAllIcon, {}, void 0),
                    isSelected: () => {
                        return this.editContext.isCollapsed;
                    },
                    belowLabel: this.editContext.isCollapsed ? _jsx(OnDiv, { children: "on" }, void 0) : _jsx(OffDiv, { children: "off" }, void 0),
                },
            ],
            wrapperStyle: { border: "none" },
        };
    }
    getLine(value) {
        let targetSequence = this.editContext.getCandidateOrRealSequence(value.toId);
        let isHiddenStep = Reflect.get(value.fromStep, "hidden");
        let startId = null;
        let startAnchor = "right";
        if (this.isCollapsed(value.fromSequence)) {
            // no need to split the lines by instruction. just do with squence.
            startId = value.fromSequence._id;
            startAnchor = [
                {
                    position: "bottom",
                    offset: {
                        x: 20,
                        y: -10,
                    },
                },
                {
                    position: "right",
                    offset: {
                        y: Math.ceil(value.fromSequence.instructions.filter((ins) => ins.strategy !== FlowStepOutputInstructionType.BRANCH).length / 2) * 16,
                        x: -12,
                    },
                },
                "top",
                "left",
            ];
        }
        else {
            startId = value.fromId;
        }
        if (isHiddenStep) {
            startAnchor = "bottom";
        }
        let endAnchor = [
            "left",
            "top",
            {
                position: "bottom",
                offset: {
                    x: 20,
                    y: -10,
                },
            },
        ];
        if (targetSequence instanceof CandidateSequence && !isHiddenStep) {
            endAnchor = "left";
        }
        let tooltip = value.fromInstruction.pathName;
        let label = tooltip.length > FlowConstants.MAX_CHARS_STEP_PATH_LABEL
            ? `${tooltip.slice(0, FlowConstants.MAX_CHARS_STEP_PATH_LABEL)}...`
            : tooltip;
        return {
            targetSequence,
            arrow: {
                start: startId,
                startAnchor: startAnchor,
                end: value.toId,
                endAnchor: endAnchor,
                strokeWidth: 2,
                headSize: 3,
                color: FlowConstants.DEFAULT_RELATION_LINE_COLOR,
                avoidRects: this.flow.sequences.map((s) => s._id),
            },
            labels: [
                {
                    label: (_jsx(Tooltip, Object.assign({ title: tooltip }, { children: _jsxs("span", Object.assign({ style: { display: "flex", alignItems: "center" } }, { children: [isHiddenStep && _jsx(BranchIcon, {}, void 0), " ", label] }), void 0) }), void 0)),
                    value,
                    isFlowConnection: isHiddenStep,
                },
            ],
            value,
        };
    }
    renderSequenceContent(sequence) {
        return _jsx(RegularSequenceContent, { sequence: sequence, editContext: this.editContext, flow: this.flow }, void 0);
    }
    renderSequenceTitle(sequence) {
        return _jsx(RegularSequenceTitle, { sequence: sequence, displayBehavior: this }, void 0);
    }
    renderStepStrategy() {
        return _jsx(RegularStepStrategy, { editContext: this.editContext }, void 0);
    }
    renderSequenceStrategy(sequence) {
        return _jsx(RegularSequenceStrategy, { sequence: sequence }, void 0);
    }
    renderSequenceActions(sequence) {
        return _jsx(RegularSequenceActions, { sequence: sequence, displayBehavior: this }, void 0);
    }
}
//# sourceMappingURL=SequenceDisplayBehavior.js.map