import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import { StepDescriptionIcon } from '../../../CommonUI/Icon/StepDescriptionIcon';
import { ObserveState } from '../../../CommonUI/StateManagement/ObserveState';
import { StepDescription } from '../../CommonUI/StepDescription';
import { FlowStepOutputInstructionType } from '../../Structure/FlowStepOutputInstructions';
import { RegularStepInstruction } from '../Regular/StepInstruction';
const InstructionsDiv = styled.div `
	margin-left: auto;
    display: flex;
    flex-direction: column;
`;
const DiagramDiv = styled.div `
    position: relative;
    display: flex;
    flex-direction: row;

    .Diagram-step__icon {
        padding-top: 4px;
    }

    .Diagram-step__description-icon {
        cursor: pointer;
        img {
            margin-top: 8px;
            width: 12px;
        }

    }
`;
const StepDescriptionDiv = styled.div `
    margin-right: -12px;
    margin-left: -12px;
    margin-bottom: -12px;
    background: rgb(39, 41, 50, 0.03);
    max-width: fit-content;
`;
export const FlowDiagramSequenceContent = (props) => {
    let firstStep = props.sequence.steps.length ? props.sequence.steps[0] : null;
    const Intructions = _jsx(InstructionsDiv, { children: props.sequence.instructions.map((ins, idx) => {
            var _a;
            return (_jsx(RegularStepInstruction, { editContext: props.editContext, instruction: ins, hiddenStepName: ((_a = firstStep === null || firstStep === void 0 ? void 0 : firstStep.getOutcomeInstructions()[0]) === null || _a === void 0 ? void 0 : _a.pathName) || 'Done', showHiddenBranch: true, hideLabel: ins.strategy === FlowStepOutputInstructionType.BRANCH }, idx));
        }) }, void 0);
    const toggleShowDescription = (event) => {
        event.stopPropagation();
        firstStep.isShowDescription = !firstStep.isShowDescription;
        firstStep.stepUpdate();
    };
    return _jsxs("div", { children: [_jsxs(DiagramDiv, { children: [(firstStep === null || firstStep === void 0 ? void 0 : firstStep.icon) && _jsx("div", Object.assign({ className: "Diagram-step__icon" }, { children: firstStep.icon }), void 0),
                    (firstStep === null || firstStep === void 0 ? void 0 : firstStep.description) &&
                        _jsx("div", Object.assign({ className: "Diagram-step__description-icon", onClick: toggleShowDescription }, { children: _jsx(StepDescriptionIcon, {}, void 0) }), void 0),
                    props.sequence.isNormal && _jsx(_Fragment, { children: Intructions }, void 0)] }, void 0),
            _jsx(ObserveState, { listenTo: firstStep, properties: ['isShowDescription'], control: () => {
                    if (firstStep && firstStep.isShowDescription) {
                        return _jsx(StepDescriptionDiv, { children: _jsx(StepDescription, { step: firstStep }, void 0) }, void 0);
                    }
                    return _jsx(_Fragment, {}, void 0);
                } }, void 0)] }, void 0);
};
//# sourceMappingURL=FlowStackContent.js.map