"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DragConnectorRender = exports.DragConnector = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
const react_beautiful_dnd_1 = require("react-beautiful-dnd");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const lib_1 = tslib_1.__importDefault(require("react-xarrows/lib"));
const OpenBlueIcon_1 = require("../../CommonUI/Icon/OpenBlueIcon");
const MappingConstants_1 = require("@appglue/common/dist/Mapping/MappingConstants");
const portal = document.createElement("div");
portal.classList.add("my-super-cool-portal");
if (!document.body) {
    throw new Error("body not ready for portal creation!");
}
document.body.appendChild(portal);
const DragConnector = ({ fromId, toId, icon, direction: propdirection, isDraggingDisabled = false, lineColor, lineWidth, }) => {
    let direction = propdirection || "right";
    const renderDragging = (element, inPortal) => {
        if (inPortal) {
            return react_dom_1.default.createPortal(element, portal);
        }
        return element;
    };
    return ((0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Draggable, { draggableId: toId, index: 0, isDragDisabled: isDraggingDisabled, children: (provided, snapshot) => {
            return renderDragging((0, jsx_runtime_1.jsxs)(exports.DragConnectorRender, { id: toId, ref: provided.innerRef, direction: direction, ...provided.draggableProps, ...provided.dragHandleProps, children: [(0, jsx_runtime_1.jsx)("div", { className: `${snapshot.isDragging ? "drag-connector isdragging" : "drag-connector"}`, children: icon || (0, jsx_runtime_1.jsx)(OpenBlueIcon_1.OpenBlueIcon, {}) }), direction === "right" && ((0, jsx_runtime_1.jsx)(lib_1.default, { end: toId, start: fromId, startAnchor: "right", endAnchor: "left", color: lineColor || MappingConstants_1.MappingConstants.MAPPING_LINE_COLOR, strokeWidth: lineWidth || 10, showHead: false })), direction === "left" && ((0, jsx_runtime_1.jsx)(lib_1.default, { end: fromId, start: toId, startAnchor: "left", endAnchor: "right", color: lineColor || MappingConstants_1.MappingConstants.MAPPING_LINE_COLOR, strokeWidth: lineWidth || 1, showHead: false }))] }), snapshot.isDragging);
        } }));
};
exports.DragConnector = DragConnector;
exports.DragConnectorRender = styled_components_1.default.div `
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8px;
    height: 8px;

    position: absolute;

    ${(props) => props.direction === "right" &&
    `
            left: 100%;
            top: 50%;
        `}

    ${(props) => props.direction === "left" &&
    `
            right: 100%;
            top: 50%;
        `}

  transform: translateY(-50%);

    .drag-connector {
        display: flex;
    }
`;
//# sourceMappingURL=DragConnector.js.map