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 styled from "styled-components";
import { FlowConstants } from "../CommonUI/FlowConstants";
import { StateManager } from "../../CommonUI/StateManagement/StateManager";
import MovementSvg from "../../assets/images/icons/movement_white.svg";
import { FlowStepOutputInstructionType } from "../Structure/FlowStepOutputInstructions";
const FlowSequenceDiv = styled("div") `
    ${(props) => !props.isDisabledDragging &&
    `
            top: ${props.isDragging ? 0 : props.position.y}px;
            left: ${props.isDragging ? 0 : props.position.x}px;
            position: absolute;
	    `}

    margin-bottom: 10px;
    padding: ${(props) => props.padding};
    background: transparent;

    box-sizing: border-box;
    border-radius: 7px;
    min-width: ${(props) => props.size.width}px;
    ${(props) => `border: 2px solid ${props.borderColor};`}

    ${(props) => (!props.isDragging ? `transform: none !important;` : `z-index: 1;`)}

    > div.stack {
        border-radius: 4px;
        position: relative;
        padding: 8px 12px 6px;
        background: ${(props) => props.background};

        ${(props) => !props.isDisabledDragging &&
    props.isDragging &&
    `
			&.stack-move {
				cursor: url(${MovementSvg}), auto;
			}
		`}
    }

    .stack-actions {
        position: absolute;
        right: 5px;
        top: -40px;
        padding-bottom: 20px;

        .button-group {
            opacity: ${(props) => (props.selected ? 1 : 0)};
            transition: opacity 0.1s;

            border: 1px solid #f1f1f6;
            box-sizing: border-box;
            border-radius: 4px;
            display: flex;
        }
    }

    &:hover .stack-actions .button-group {
        opacity: 1;
    }
`;
export class FlowSequenceStack extends React.Component {
    constructor(props) {
        super(props);
        this.width = FlowConstants.DEFAULT_STACK_WIDTH;
        this.collapsedWidth = FlowConstants.DEFAULT_COLLAPSED_STACK_WIDTH;
        this.collapsedHeight = FlowConstants.DEFAULT_COLLAPSED_STACK_HEIGHT;
        this.containerRef = React.createRef();
        this.getDefaultPosition = () => {
            return {
                x: this.props.sequence.x,
                y: this.props.sequence.y,
            };
        };
        this.dragDropAction = (data, isCombining = false) => {
            this.props.editContext.dragOverSequence = null;
            this.props.sequence.desiredX = data.x;
            this.props.sequence.desiredY = data.y;
            if (!isCombining) {
                this.props.editContext.onSequenceDragEnding(this.props.sequence, data.x, data.y);
            }
            this.setState({
                isDragging: false,
            });
        };
        this.onDragStop = (_e, data) => {
            let sequence = this.props.editContext.getSequenceByXY(data.x, data.y);
            if (sequence) {
                this.props.editContext.dragOverSequence = sequence;
                this.props.editContext.notification = {
                    message: "Do you really want to combine these stacks?",
                    onSuccess: () => {
                        this.props.editContext.notification = undefined;
                        this.dragDropAction(data, true);
                        this.props.editContext.combineSequences(this.props.sequence, sequence);
                    },
                    onCancel: () => {
                        this.props.editContext.notification = undefined;
                        this.dragDropAction(data);
                    },
                };
            }
            else {
                this.props.editContext.dragOverSequence = null;
                this.dragDropAction(data);
            }
        };
        this.onDragStart = (_e, _data) => {
            this.props.editContext.clearSelection();
            this.setState({
                isDragging: true,
            });
        };
        this.onDrag = (_e, data) => {
            this.props.sequence.desiredX = data.x;
            this.props.sequence.desiredY = data.y;
            let sequence = this.props.editContext.getSequenceByXY(data.x, data.y);
            if (sequence) {
                this.props.editContext.dragOverSequence = sequence;
            }
            else {
                this.props.editContext.dragOverSequence = null;
            }
            StateManager.changed(this.props.sequence);
        };
        this.onSelectSequence = (e) => {
            e.stopPropagation();
            // end / error stacks can not be selected and skip when reordering the steps.
            let isReordering = Reflect.apply(Reflect.get(e.target, "getAttribute"), e.target, ["data-rbd-droppable-id"]);
            if (this.props.sequence.isNormal && !isReordering) {
                this.props.editContext.setSelection(this.props.sequence);
                this.props.editContext.displayBehavior.onSetSelection(this.props.sequence);
            }
        };
        this.onMouseDown = (e) => {
            if (this.props.sequence.isError) {
                this.props.editContext.showErrorOrEndConnections = FlowStepOutputInstructionType.THROW_EXCEPTION;
            }
            else if (this.props.sequence.isEnd) {
                this.props.editContext.showErrorOrEndConnections = FlowStepOutputInstructionType.END_FLOW;
            }
        };
        this.onMouseUp = (e) => {
            if (this.props.sequence.isError || this.props.sequence.isEnd) {
                this.props.editContext.showErrorOrEndConnections = null;
            }
        };
        this.state = {
            isDragging: false,
        };
    }
    render() {
        return (_jsx(ReactDraggable, Object.assign({ disabled: this.props.sequence.isPrimary || !this.props.sequence.isNormal, defaultPosition: this.getDefaultPosition(), position: this.getDefaultPosition(), onStop: this.onDragStop, onStart: this.onDragStart, onDrag: this.onDrag, handle: `.stack-move`, cancel: ".inline-editor", nodeRef: this.containerRef }, { children: _jsx(FlowSequenceDiv, Object.assign({ id: this.props.sequence.getElementId(), padding: this.props.editContext.displayBehavior.sequenceOuterPadding, size: this.props.editContext.displayBehavior.getSequenceMainSize(this.props.sequence), background: this.props.editContext.displayBehavior.getSequenceBackgroundColor(this.props.sequence), position: this.getDefaultPosition(), isDragging: this.state.isDragging, isDisabledDragging: !this.props.sequence.isNormal, selected: this.props.editContext.selection === this.props.sequence._id, onContextMenu: (e) => {
                    if (this.props.editContext.displayBehavior.isEnableContextMenu) {
                        e.preventDefault();
                        this.props.editContext.contextControl = {
                            selectedId: this.props.sequence._id,
                            mouseX: e.clientX,
                            mouseY: e.clientY,
                        };
                    }
                }, onClick: this.onSelectSequence, borderColor: this.props.editContext.displayBehavior.getSequenceBorderColor(this.props.sequence), ref: this.containerRef }, { children: _jsxs("div", Object.assign({ className: "stack", onMouseDown: this.onMouseDown, onMouseUp: this.onMouseUp, onMouseLeave: this.onMouseUp }, { children: [this.props.editContext.displayBehavior.renderSequenceTitle(this.props.sequence), _jsx("div", Object.assign({ className: "stack-actions" }, { children: _jsx("div", Object.assign({ className: "button-group" }, { children: this.props.editContext.displayBehavior.renderSequenceActions(this.props.sequence) }), void 0) }), void 0),
                        _jsx(Droppable, Object.assign({ droppableId: this.props.sequence._id, direction: this.props.editContext.displayBehavior.getSequenceDroppableDirection(this.props.sequence) }, { children: (provided, snapshot) => {
                                return (_jsxs("div", Object.assign({}, provided.droppableProps, { ref: provided.innerRef, style: {
                                        display: snapshot.isDraggingOver &&
                                            this.props.editContext.displayBehavior.isEnabledPlaceholderWhileDrop(this.props.sequence) &&
                                            this.props.editContext.displayBehavior.getSequenceDroppableDirection(this.props.sequence) === "horizontal"
                                            ? "flex"
                                            : undefined,
                                    } }, { children: [this.props.editContext.displayBehavior.renderSequenceContent(this.props.sequence), _jsx("div", Object.assign({ style: {
                                                display: this.props.editContext.displayBehavior.isEnabledPlaceholderWhileDrop(this.props.sequence)
                                                    ? "block"
                                                    : "none",
                                            } }, { children: provided.placeholder }), void 0)] }), void 0));
                            } }), void 0), this.props.editContext.displayBehavior.renderSequenceStrategy(this.props.sequence)] }), void 0) }), void 0) }), void 0));
    }
}
//# sourceMappingURL=FlowSequenceStack.js.map