import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Draggable } from "react-beautiful-dnd";
import styled from "styled-components";
import Xarrow from "react-xarrows/lib";
import { OpenBlueIcon } from "../../Icon/OpenBlueIcon";
import { XMappingConstants } from "../XMappingConstants";
export const DragConnector = ({ draggableId, icon, direction: propdirection, onMouseUp, }) => {
    let direction = propdirection || "right";
    return (_jsx(Draggable, Object.assign({ draggableId: draggableId, index: 0, shouldRespectForcePress: !!onMouseUp }, { children: (provided, snapshot) => (_jsxs(DragConnectorRender, Object.assign({ id: `${draggableId}_drag_connector`, ref: provided.innerRef, className: `${snapshot.isDragging ? "drag-connector isdragging" : "drag-connector"}`, direction: direction, onMouseUp: onMouseUp }, provided.draggableProps, provided.dragHandleProps, { children: [icon || _jsx(OpenBlueIcon, {}, void 0),
                direction === "right" && (_jsx(Xarrow, { end: `${draggableId}_drag_connector`, start: draggableId, startAnchor: "right", endAnchor: "left", color: XMappingConstants.MAPPING_LINE_COLOR, strokeWidth: 1, showHead: false }, void 0)),
                direction === "left" && (_jsx(Xarrow, { end: `${draggableId}_drag_connector`, start: draggableId, startAnchor: "left", endAnchor: "right", color: XMappingConstants.MAPPING_LINE_COLOR, strokeWidth: 1, showHead: false }, void 0))] }), void 0)) }), void 0));
};
const DragConnectorRender = styled.div `
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border: 1px solid #f1f1f6;
    box-sizing: border-box;
    /* sh 9 4 12 */

    box-shadow: 0px 4px 9px -2px rgba(39, 41, 50, 0.12);
    border-radius: 4px;

    position: absolute;

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

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

    transform: translateY(-50%);
`;
//# sourceMappingURL=DragConnector.js.map