import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Droppable } from "react-beautiful-dnd";
import ReactDraggable from "react-draggable";
import { FlowConstants } from "../CommonUI/FlowConstants";
import styled from "styled-components";
import { CandidateSequence } from "../Structure/CandidateSequence";
import { FlowStepOutputInstructionType } from "../Structure/FlowStepOutputInstructions";
import { FlowStepSequenceStrategy } from "../Structure/FlowStepSequence";
import { StateManager } from "../../CommonUI/StateManagement/StateManager";
export const CandidateSequenceDiv = styled("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;`}
`;
export const CandidateSequenceDropDiv = styled("div") `
    border-radius: 4px;
    padding: 4px;
    display: flex;
    flex-direction: column;

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

    ${(props) => !props.isPathCandidate &&
    `
		${props.isDroppingOver ? `background: ${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: ${FlowConstants.PATH_DROPPING_COLOR};
	`}
`;
export const CandidateSequenceDropTitleDiv = styled.div `
    border-radius: 4px;
    display: flex;
    width: 100%;
    height: 100%;
    border: 1px dashed #272932;
    flex: 1;

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

    display: flex;
    align-items: center;
    text-align: center;

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

    padding: ${(props) => (props.isDragging ? "10px" : props.size.padding)};
`;
export class CandidateSequenceStack extends React.Component {
    constructor(props) {
        super(props);
        this.getDefaultPosition = () => {
            return { x: this.props.candidate.x, y: this.props.candidate.y };
        };
        this.onDragStart = (e, _data) => {
            this.props.editContext.clearSelection();
            let candidateSize = this.props.editContext.displayBehavior.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,
            });
        };
        this.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;
            }
        };
        this.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) {
                    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 (Reflect.get(step, "hidden")) {
                            seq.strategy = FlowStepSequenceStrategy.ENDFLOW;
                        }
                        else {
                            // for step strategy
                            this.props.candidate.instruction.strategy = FlowStepOutputInstructionType.END_FLOW;
                            this.props.editContext.onSequenceUpdate(seq);
                        }
                    }
                    else if (sequence.isError) {
                        if (Reflect.get(step, "hidden")) {
                            // for sequence strategy
                            seq.strategy = FlowStepSequenceStrategy.ENDFLOWINERROR;
                        }
                        else {
                            // for step strategy
                            this.props.candidate.instruction.strategy = FlowStepOutputInstructionType.THROW_EXCEPTION;
                            this.props.editContext.onSequenceUpdate(seq);
                        }
                    }
                }
            }
            this.setState({
                isDragging: false,
                x: 0,
                y: 0,
            });
            // todo: remove after fixes the wireness dragging candidate.
            StateManager.propertyChanged(this.props.editContext, "connections");
        };
        this.state = {
            isDragging: false,
            x: 0,
            y: 0,
        };
    }
    render() {
        let droppableId = this.props.candidate._id;
        let isStepCandidate = Reflect.get(this.props.candidate, "instruction") !== undefined;
        let candidateSize = this.props.editContext.displayBehavior.getCandidateCommonStyles();
        return (_jsx(ReactDraggable, Object.assign({ disabled: !isStepCandidate, onStop: this.onDragStop, onDrag: this.onDrag, onStart: this.onDragStart, position: this.getDefaultPosition(), defaultPosition: this.getDefaultPosition() }, { children: _jsx(CandidateSequenceDiv, Object.assign({ id: this.props.candidate.getElementId(), position: this.getDefaultPosition(), isDragging: this.state.isDragging, draggingPosition: this.state, show: isStepCandidate || !!this.props.editContext.draggingControl }, { children: _jsx(Droppable, Object.assign({ droppableId: droppableId }, { children: (dropProvided, dropSnapshot) => {
                        return (_jsxs(CandidateSequenceDropDiv, Object.assign({ isPathCandidate: isStepCandidate, isDroppingOver: dropSnapshot.isDraggingOver, isDragging: this.state.isDragging, size: candidateSize }, dropProvided.droppableProps, { ref: dropProvided.innerRef }, { children: [_jsx(CandidateSequenceDropTitleDiv, Object.assign({ size: candidateSize, isDragging: this.state.isDragging }, { children: "Drop step here or drag to link" }), void 0),
                                _jsx("div", Object.assign({ style: { display: "none" } }, { children: dropProvided.placeholder }), void 0)] }), void 0));
                    } }), void 0) }), void 0) }), void 0));
    }
}
//# sourceMappingURL=CandidateSequenceStack.js.map