"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.XMappingDestinationItem = exports.XMappingDestination = 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_beautiful_dnd_1 = require("react-beautiful-dnd");
const CommonStyles_1 = require("../Builder/CommonStyles");
const CollapseIcon_1 = require("../../CommonUI/Icon/CollapseIcon");
const ExpandGrayIcon_1 = require("../../CommonUI/Icon/ExpandGrayIcon");
const MappingConstants_1 = require("@appglue/common/dist/Mapping/MappingConstants");
const react_xarrows_1 = require("react-xarrows");
const XMappingRule_1 = require("./XMappingRule");
const ObserveMultiState_1 = require("../../CommonUI/StateManagement/ObserveMultiState");
const DragConnector_1 = require("./DragConnector");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
const ObjectDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/ObjectDataDefinition");
const XMappingDestination = (props) => {
    const updateXarrow = (0, react_xarrows_1.useXarrow)();
    const ref = react_1.default.useRef(null);
    return ((0, jsx_runtime_1.jsxs)(XMappingDestinationRender, { children: [(0, jsx_runtime_1.jsx)(XMappingDestinationHeader, { children: (0, jsx_runtime_1.jsx)(CommonStyles_1.XMappingSectionHeader, { className: "title", children: "Destination" }) }), (0, jsx_runtime_1.jsx)(XMappingDestinationVerticalLine, {}), (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)(ObserveMultiState_1.ObserveMultiState, { listenTo: [props.definition, props.editContext], control: () => {
                        const invalidRules = props.definition.getInvalidRules();
                        return ((0, jsx_runtime_1.jsxs)(XDestinationList, { children: [invalidRules.length > 0 && ((0, jsx_runtime_1.jsx)(XMappingMissingRows, { children: invalidRules.map((mappingRule, idx) => ((0, jsx_runtime_1.jsxs)(XMappingDestinationListItem, { children: [(0, jsx_runtime_1.jsx)(XMappingRuleSection, { children: (0, jsx_runtime_1.jsx)(XMappingRule_1.XMappingRule, { mappingRule: mappingRule, editContext: props.editContext, definition: props.definition, isInvalid: true }) }), (0, jsx_runtime_1.jsx)(XMappingDestinationSection, { size: "Medium", deepsCount: 0, children: (0, jsx_runtime_1.jsx)(exports.XMappingDestinationItem, { path: mappingRule.targetPath, editContext: props.editContext, definition: props.definition, isInvalid: true, mappingRule: mappingRule }) })] }, idx))) })), DataUtilities_1.DataUtilities.getAllSubFieldsWithPath(props.definition.getExecutionResult()).map((fieldWithPath, idx) => {
                                    const { field, path } = fieldWithPath;
                                    let mappingRule = props.definition.getMappingRuleByTargetPath(path);
                                    let isCollapsed = props.editContext.isDestinationCollapsed(path);
                                    return ((0, jsx_runtime_1.jsxs)(XMappingDestinationListItem, { children: [(0, jsx_runtime_1.jsx)(XMappingRuleSection, { children: (0, jsx_runtime_1.jsx)(XMappingRule_1.XMappingRule, { mappingRule: mappingRule, editContext: props.editContext, definition: props.definition }) }), (0, jsx_runtime_1.jsx)(XMappingDestinationSection, { size: path.includes(".") ? "Small" : "Medium", deepsCount: path.split(".").length - 1, isCollapsed: isCollapsed, children: isCollapsed ? ((0, jsx_runtime_1.jsx)("div", { style: { position: "relative", marginTop: -4 }, children: (0, jsx_runtime_1.jsx)(XMappingConnectorForMappingRule, { id: `${MappingConstants_1.MappingConstants.MAPPING_PREFIX_RULE_ITEM}${path}_connector_formappingrule` }) })) : ((0, jsx_runtime_1.jsx)(exports.XMappingDestinationItem, { path: mappingRule.targetPath, editContext: props.editContext, definition: props.definition, field: field, mappingRule: mappingRule })) })] }, idx));
                                })] }));
                    } }) })] }));
};
exports.XMappingDestination = XMappingDestination;
const XMappingDestinationItem = (props) => {
    let parentPath;
    if (props.path.includes(".")) {
        let pieces = props.path.split(".");
        parentPath = pieces.slice(0, -1).join(".");
    }
    let isCurrentCollapsed = props.editContext.isDestinationCollapsed(props.path, false);
    let forDestinationId = props.editContext.ruleIdForDestination(props.mappingRule.id);
    let currentIdForDroppable = props.editContext.destinationId(props.path);
    let currentIdForDraggable = props.editContext.ruleId(props.mappingRule.id);
    let itemSize = props.path.includes(".") ? "Small" : "Medium";
    return ((0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Droppable, { droppableId: currentIdForDroppable, isDropDisabled: props.isInvalid, children: (provided, snapshot) => {
            let shouldRenderClone = currentIdForDraggable === snapshot.draggingFromThisWith;
            return ((0, jsx_runtime_1.jsxs)(CommonStyles_1.XMappingItemRender, { id: currentIdForDroppable, isDraggingOver: snapshot.isDraggingOver, size: props.path && props.path.includes(".") ? "Small" : "Medium", ref: provided.innerRef, isInvalid: props.isInvalid, ...provided.droppableProps, children: [props.isInvalid ? ((0, jsx_runtime_1.jsx)(CommonStyles_1.XMappingDragItem, { size: "Medium", children: `Missing: ${props.path}` })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [shouldRenderClone && (0, jsx_runtime_1.jsx)(CommonStyles_1.XMappingDragItem, { size: itemSize, children: props.path }), (0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Draggable, { draggableId: currentIdForDraggable, 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, highlighted: props.editContext.isHighlighted(props.mappingRule.id), onMouseEnter: () => {
                                            if (!props.mappingRule.empty) {
                                                props.editContext.hightlightedRules = [props.mappingRule.id];
                                            }
                                        }, onMouseLeave: () => {
                                            if (!props.mappingRule.empty) {
                                                props.editContext.hightlightedRules = [];
                                            }
                                        }, children: props.path }));
                                } })] })), !props.mappingRule.empty && ((0, jsx_runtime_1.jsx)(DragConnector_1.DragConnector, { fromId: forDestinationId, toId: props.editContext.destinationDragId(props.mappingRule.id), direction: "left", icon: (0, jsx_runtime_1.jsx)(CommonStyles_1.StyledCircle, {}), lineColor: props.editContext.isHighlighted(props.mappingRule.id)
                            ? MappingConstants_1.MappingConstants.HIGHLIGHT_MAPPING_LINE_COLOR
                            : MappingConstants_1.MappingConstants.MAPPING_LINE_COLOR, lineWidth: props.editContext.isHighlighted(props.mappingRule.id) ? 2 : 1 })), (0, jsx_runtime_1.jsx)(CommonStyles_1.HiddenPlaceholderWrapper, { children: provided.placeholder }), props.field instanceof ObjectDataDefinition_1.ObjectDataDefinition ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(XMappingConnectorForChildren, { id: props.editContext.destinationConnectorIdForChildren(props.path) }), (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.toggleDestinationCollapse(props.path);
                                    }, children: !isCurrentCollapsed ? (0, jsx_runtime_1.jsx)(CollapseIcon_1.CollapseIcon, {}) : (0, jsx_runtime_1.jsx)(ExpandGrayIcon_1.ExpandGrayIcon, {}) }) })] })) : parentPath ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(XMappingConnectorForParent, { id: props.editContext.destinationConnectorIdForParent(props.path) }), (0, jsx_runtime_1.jsx)(lib_1.default, { start: props.editContext.destinationConnectorIdForParent(props.path), color: MappingConstants_1.MappingConstants.MAPPING_LINE_COLOR, end: props.editContext.destinationConnectorIdForChildren(parentPath), startAnchor: "left", endAnchor: "bottom", strokeWidth: 10, showHead: false, path: "grid" })] })) : null] }));
        } }));
};
exports.XMappingDestinationItem = XMappingDestinationItem;
const XMappingDestinationRender = styled_components_1.default.div `
  width: 400px;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;

  padding-bottom: 20px;
}
`;
const XMappingConnectorForMappingRule = styled_components_1.default.div `
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
`;
const XMappingConnectorForChildren = styled_components_1.default.div `
    position: absolute;
    top: 100%;
    right: 8px;
`;
const XMappingConnectorForParent = styled_components_1.default.div `
    position: absolute;
    top: 50%;
    right: 0px;
`;
const XDestinationList = styled_components_1.default.div `
    display: flex;
    flex-direction: column;

    margin-right: 30px;
`;
const XMappingMissingRows = styled_components_1.default.div `
    background: rgba(96, 104, 129, 0.1);
`;
const XMappingRuleSection = styled_components_1.default.div `
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100px;
`;
const XMappingDestinationSection = styled_components_1.default.div `
    display: flex;
    align-items: center;

    flex: 1;

    padding: ${(props) => props.isCollapsed
    ? `0 ${(props.deepsCount - 1) * 25 + 56}px 0 ${(props.deepsCount - 1) * 8 + 24}px`
    : `${props.size === "Small" ? "2px" : "4px"} ${props.deepsCount * 25 + 56}px ${props.size === "Small" ? "2px" : "4px"} ${props.deepsCount * 8 + 24}px`};
`;
const XMappingDestinationVerticalLine = styled_components_1.default.div `
    position: absolute;
    width: 1px;
    height: 100%;
    border-left: 1px dashed rgba(64, 80, 166, 0.2);
    top: 0;
    left: 100px;
`;
const XMappingDestinationHeader = styled_components_1.default.div `
    display: flex;
    justify-content: flex-end;

    .title {
        width: 300px;
    }
`;
const XMappingDestinationListItem = styled_components_1.default.div `
    display: flex;

    flex-direction: row;

    &:hover {
        .EmptyRule-root {
            opacity: 1;
        }
    }

    position: sticky;
    right: 0;
`;
//# sourceMappingURL=XMappingDestination.js.map