"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.XMappingSourceItem = exports.XMappingSource = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const lib_1 = tslib_1.__importDefault(require("react-xarrows/lib"));
const react_xarrows_1 = require("react-xarrows");
const CommonStyles_1 = require("../Builder/CommonStyles");
const ObserveState_1 = require("../../CommonUI/StateManagement/ObserveState");
const CollapseIcon_1 = require("../../CommonUI/Icon/CollapseIcon");
const ExpandGrayIcon_1 = require("../../CommonUI/Icon/ExpandGrayIcon");
const react_beautiful_dnd_1 = require("react-beautiful-dnd");
const MappingConstants_1 = require("@appglue/common/dist/Mapping/MappingConstants");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
const ObjectDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/ObjectDataDefinition");
const DragConnector_1 = require("./DragConnector");
const XMappingSource = (props) => {
    const updateXarrow = (0, react_xarrows_1.useXarrow)();
    const ref = react_1.default.useRef(null);
    return ((0, jsx_runtime_1.jsxs)(XMappingSourceRender, { children: [(0, jsx_runtime_1.jsx)(CommonStyles_1.XMappingSectionHeader, { children: "Source" }), (0, jsx_runtime_1.jsx)(CommonStyles_1.XMappingListRender, { ref: ref, onScroll: (e) => {
                    if (ref.current) {
                        ref.current.scrollLeft = 0;
                    }
                    if (e.target === ref.current) {
                        updateXarrow();
                    }
                }, children: (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: props.editContext, control: () => {
                        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: DataUtilities_1.DataUtilities.getAllSubFieldsWithPath(props.dataDefinition).map((fieldWithPath) => {
                                const { field, path } = fieldWithPath;
                                let isCollapsed = props.editContext.isSourceCollapsed(path);
                                return ((0, jsx_runtime_1.jsx)(XMappingRuleItemColumn, { size: path.includes(".") ? "Small" : "Medium", deepsCount: path.split(".").length - 1, isCollapsed: isCollapsed, children: isCollapsed ? ((0, jsx_runtime_1.jsx)("div", { id: props.editContext.sourceDragId(path), style: { marginTop: -4, width: "100%" } })) : ((0, jsx_runtime_1.jsx)(exports.XMappingSourceItem, { field: field, path: path, editContext: props.editContext })) }, path));
                            }) }));
                    } }) })] }));
};
exports.XMappingSource = XMappingSource;
const XMappingSourceItem = (props) => {
    let parentPath;
    if (props.path.includes(".")) {
        let pieces = props.path.split(".");
        parentPath = pieces.slice(0, -1).join(".");
    }
    let isCollapsed = props.editContext.isSourceCollapsed(props.path, false);
    let currentIdForDnd = props.editContext.sourceId(props.path);
    let itemSize = props.path.includes(".") ? "Small" : "Medium";
    //let connectedRules = props.editContext.definition.getMappingRulesByInputPath(props.path);
    return ((0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Droppable, { droppableId: currentIdForDnd, children: (provided, snapshot) => {
            let shouldRenderClone = currentIdForDnd === snapshot.draggingFromThisWith;
            return ((0, jsx_runtime_1.jsxs)(CommonStyles_1.XMappingItemRender, { id: currentIdForDnd, isDraggingOver: snapshot.isDraggingOver, size: itemSize, ref: provided.innerRef, ...provided.droppableProps, children: [shouldRenderClone && ((0, jsx_runtime_1.jsx)(CommonStyles_1.XMappingDragItem, { ref: provided.innerRef, size: itemSize, isDragging: false, highlighted: props.editContext.isHighlightedSource(props.path), children: props.field.name })), (0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Draggable, { draggableId: currentIdForDnd, index: 0, children: (provided, s) => {
                            return ((0, jsx_runtime_1.jsx)(CommonStyles_1.XMappingDragItem, { ...provided.draggableProps, ...provided.dragHandleProps, ref: provided.innerRef, size: itemSize, isDragging: s.isDragging, onMouseEnter: () => {
                                    props.editContext.hoveredSource = props.path;
                                }, highlighted: props.editContext.isHighlightedSource(props.path), onMouseLeave: () => {
                                    props.editContext.hoveredSource = undefined;
                                }, children: props.field.name }));
                        } }), props.field instanceof ObjectDataDefinition_1.ObjectDataDefinition ? ((0, jsx_runtime_1.jsx)(XMappingConnectorForChildren, { id: props.editContext.sourceConnectorIdForChildren(props.path) })) : parentPath ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(XMappingConnectorForParent, { id: props.editContext.sourceConnectorIdForParent(props.path) }), (0, jsx_runtime_1.jsx)(lib_1.default, { start: props.editContext.sourceConnectorIdForParent(props.path), end: props.editContext.sourceConnectorIdForChildren(parentPath), startAnchor: "left", endAnchor: "bottom", color: MappingConstants_1.MappingConstants.MAPPING_LINE_COLOR, strokeWidth: 1, showHead: false, path: "grid" })] })) : null, props.field instanceof ObjectDataDefinition_1.ObjectDataDefinition && ((0, jsx_runtime_1.jsx)(CommonStyles_1.ActionsRender, { className: "ActionsRender", children: (0, jsx_runtime_1.jsx)(CommonStyles_1.ActionButton, { onClick: (event) => {
                                event.stopPropagation();
                                props.editContext.toggleSourceCollapse(props.path);
                            }, children: !isCollapsed ? (0, jsx_runtime_1.jsx)(CollapseIcon_1.CollapseIcon, {}) : (0, jsx_runtime_1.jsx)(ExpandGrayIcon_1.ExpandGrayIcon, {}) }) })), (0, jsx_runtime_1.jsx)(DragConnector_1.DragConnectorRender, { direction: "right", id: props.editContext.sourceDragId(props.path) }), (0, jsx_runtime_1.jsx)(CommonStyles_1.HiddenPlaceholderWrapper, { children: provided.placeholder })] }));
        } }));
};
exports.XMappingSourceItem = XMappingSourceItem;
const XMappingSourceRender = styled_components_1.default.div `
    width: 300px;

    border-right: 1px dashed rgba(64, 80, 166, 0.2);
    display: flex;
    flex-direction: column;

    height: 100%;

    padding-bottom: 20px;
`;
const XMappingRuleItemColumn = styled_components_1.default.div `
    display: flex;
    align-items: center;

    border-left: 1px dashed rgba(64, 80, 166, 0.2);

    position: sticky;
    left: 0;

    padding: ${(props) => props.isCollapsed
    ? `0 ${(props.deepsCount - 1) * 8 + 24}px 0 ${(props.deepsCount - 1) * 25 + 56}px`
    : `${props.size === "Small" ? "2px" : "4px"} ${props.deepsCount * 8 + 24}px ${props.size === "Small" ? "2px" : "4px"} ${props.deepsCount * 25 + 56}px`};
`;
const XMappingConnectorForChildren = styled_components_1.default.div `
    position: absolute;
    top: 100%;
    left: 8px;
`;
const XMappingConnectorForParent = styled_components_1.default.div `
    position: absolute;
    top: 50%;
    left: 0px;
`;
//# sourceMappingURL=XMappingSource.js.map