"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CandidateSequenceStack = exports.CandidateSequenceDropTitleDiv = exports.CandidateSequenceDropDiv = exports.CandidateSequenceDiv = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const react_beautiful_dnd_1 = require("react-beautiful-dnd");
const react_draggable_1 = tslib_1.__importDefault(require("react-draggable"));
const FlowConstants_1 = require("@appglue/common/dist/Flow/Utilities/FlowConstants");
const FlowEditContext_1 = require("../FlowEditContext");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const CandidateSequence_1 = require("@appglue/common/dist/Flow/Structure/CandidateSequence");
const FlowStepOutputInstructions_1 = require("@appglue/common/dist/Flow/Structure/FlowStepOutputInstructions");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const FlowSequenceCompleteStrategy_1 = require("@appglue/common/dist/Flow/Structure/FlowSequenceCompleteStrategy");
const FlowUtilities_1 = require("@appglue/common/dist/Flow/Utilities/FlowUtilities");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
exports.CandidateSequenceDiv = (0, styled_components_1.default)("div") `
    position: absolute;
    top: ${(props) => (props.isDragging ? props.draggingPosition.y : props.position.y)}px;
    left: ${(props) => (props.isDragging ? props.draggingPosition.x : props.position.x)}px;
    opacity: ${(props) => (props.show ? 1 : 0)};
    background: transparent;
    border-radius: 4px;
    ${(props) => props.isDragging && `z-index: 2;`}
    ${(props) => !props.isDragging && `transform: none !important;`}
`;
exports.CandidateSequenceDropDiv = (0, styled_components_1.default)("div") `
    border-radius: 4px;
    padding: 4px;
    display: flex;
    flex-direction: column;

    ${(props) => props.isDroppingOver && `border: solid 1px ${FlowConstants_1.FlowConstants.SSS_STEP_DROP_OVER_BORDER_COLOR};`}

    ${(props) => !props.isPathCandidate &&
    `
		${props.isDroppingOver ? `background: ${FlowConstants_1.FlowConstants.DROPPING_COLOR};` : `border: dashed 1px gray;`};
	`}

  ${(props) => props.isDragging
    ? `
			width: ${props.size.dragging.width}px;
			min-height: ${props.size.dragging.height}px;
		`
    : `
			width: ${props.size.width}px;
			min-height: ${props.size.height}px;
		`}

  ${(props) => props.isPathCandidate &&
    `
		background: ${UIStyleConstants_1.UIStyleConstants.WHITE_DARK_COLOR};
	`}
`;
exports.CandidateSequenceDropTitleDiv = styled_components_1.default.div `
    border-radius: 4px;
    display: flex;
    width: 100%;
    height: 100%;
    border: 1px dashed #272932;
    flex: 1;

    font-style: normal;
    font-weight: 500;
    font-size: ${(props) => props.size.fontSize}px;
    line-height: 120%;

    align-items: center;
    text-align: center;

    color: rgba(39, 41, 50, 0.5);
    cursor: pointer;

    padding: ${(props) => (props.isDragging ? "10px" : props.size.padding)};
`;
class CandidateSequenceStack extends react_1.default.Component {
    constructor(props) {
        super(props);
        this.state = {
            isDragging: false,
            x: 0,
            y: 0,
        };
    }
    getDefaultPosition = () => {
        return { x: this.props.candidate.x, y: this.props.candidate.y };
    };
    onDragStart = (e) => {
        this.props.editContext.clearSelection();
        let candidateSize = this.props.editContext.getCandidateCommonStyles();
        let mouseX = e.clientX;
        let mouseY = e.clientY;
        let rect = e.currentTarget.getBoundingClientRect();
        let x = mouseX - candidateSize.dragging.width / 2 - rect.left;
        let y = mouseY - candidateSize.dragging.height / 2 - rect.top;
        this.setState({
            isDragging: true,
            x,
            y,
        });
    };
    onDrag = (_e, data) => {
        let sequence = this.props.editContext.getSequenceByXY(data.x, data.y);
        if (sequence) {
            this.props.editContext.dragOverSequence = sequence;
        }
        else {
            this.props.editContext.dragOverSequence = null;
        }
        StateManager_1.StateManager.propertyChanged(this.props.editContext, FlowEditContext_1.FlowEditContext.DRAG_OVER_SEQUENCE);
    };
    onDragStop = (_e, data) => {
        let sequence = this.props.editContext.getSequenceByXY(data.x, data.y);
        this.props.editContext.dragOverSequence = null;
        if (sequence) {
            if (sequence.isNormal) {
                this.props.editContext.combineSequences(this.props.candidate, sequence);
            }
            else if (this.props.candidate instanceof CandidateSequence_1.CandidateSequence) {
                let step = this.props.editContext.flow.find(this.props.candidate.instruction.stepId);
                if (!step)
                    return;
                let seq = this.props.editContext.flow.findSequenceByStepId(step._id);
                if (!seq)
                    return;
                if (sequence.isEnd) {
                    // for sequence strategy
                    if (FlowUtilities_1.FlowUtilities.IsEndStep(step)) {
                        seq.strategy = FlowSequenceCompleteStrategy_1.FlowSequenceCompleteStrategy.END_FLOW;
                    }
                    else {
                        // for step strategy
                        this.props.candidate.instruction.strategy = FlowStepOutputInstructions_1.FlowStepOutputInstructionType.END_FLOW;
                        StateManager_1.StateManager.changed(seq);
                    }
                }
                else if (sequence.isError) {
                    if (FlowUtilities_1.FlowUtilities.IsEndStep(step)) {
                        // for sequence strategy
                        seq.strategy = FlowSequenceCompleteStrategy_1.FlowSequenceCompleteStrategy.END_FLOW_IN_ERROR;
                    }
                    else {
                        // for step strategy
                        this.props.candidate.instruction.strategy = FlowStepOutputInstructions_1.FlowStepOutputInstructionType.THROW_EXCEPTION;
                        StateManager_1.StateManager.changed(seq);
                    }
                }
            }
        }
        this.setState({
            isDragging: false,
            x: 0,
            y: 0,
        });
        this.props.editContext.refreshLines();
    };
    render() {
        let droppableId = this.props.candidate._id;
        let isStepCandidate = Reflect.get(this.props.candidate, "instruction") !== undefined;
        let candidateSize = this.props.editContext.getCandidateCommonStyles();
        return ((0, jsx_runtime_1.jsx)(react_draggable_1.default, { disabled: !isStepCandidate, onStop: this.onDragStop, onDrag: this.onDrag, onStart: this.onDragStart, position: this.getDefaultPosition(), defaultPosition: this.getDefaultPosition(), children: (0, jsx_runtime_1.jsx)(exports.CandidateSequenceDiv, { id: this.props.candidate.getElementId(), position: this.getDefaultPosition(), isDragging: this.state.isDragging, draggingPosition: this.state, show: isStepCandidate || !!this.props.editContext.draggingControl, children: (0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Droppable, { droppableId: droppableId, children: (dropProvided, dropSnapshot) => {
                        return ((0, jsx_runtime_1.jsxs)(exports.CandidateSequenceDropDiv, { isPathCandidate: isStepCandidate, isDroppingOver: dropSnapshot.isDraggingOver, isDragging: this.state.isDragging, size: candidateSize, ...dropProvided.droppableProps, ref: dropProvided.innerRef, children: [(0, jsx_runtime_1.jsx)(exports.CandidateSequenceDropTitleDiv, { size: candidateSize, isDragging: this.state.isDragging, children: "Drop step here or drag to link" }), (0, jsx_runtime_1.jsx)("div", { style: { display: "none" }, children: dropProvided.placeholder })] }));
                    } }) }) }));
    }
}
exports.CandidateSequenceStack = CandidateSequenceStack;
//# sourceMappingURL=CandidateSequenceStack.js.map