import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import Xarrow from "react-xarrows/lib";
import { Droppable } from "react-beautiful-dnd";
import { ObjectDataDefinition } from "../../../Common/Data/Definitions/ObjectDataDefinition";
import { ActionButton, ActionsRender, XMappingItemRender, XMappingListRender, XMappingSectionHeader, XMappingSubItemRender, } from "../CommonStyles";
import { CollapseIcon } from "../../Icon/CollapseIcon";
import { ExpandGrayIcon } from "../../Icon/ExpandGrayIcon";
import { ObserveState } from "../../StateManagement/ObserveState";
import { StateManager } from "../../StateManagement/StateManager";
import { XMappingConstants } from "../XMappingConstants";
import { DragConnector } from "./DragConnector";
import { PlusBlueIcon } from "../../Icon/PlusBlueIcon";
import { useXarrow } from "@appglue/xarrow/lib";
export const XMappingDestination = (props) => {
    const updateXarrow = useXarrow();
    return (_jsxs(XMappingDestinationRender, { children: [_jsx(XMappingSectionHeader, { children: "Destination" }, void 0),
            _jsx(XMappingListRender, Object.assign({ onScroll: updateXarrow }, { children: props.definition.getExecutionResult().fields.map((field, idx) => (_jsx(XMappingDestinationItem, { field: field, path: "", editContext: props.editContext, definition: props.definition }, idx))) }), void 0)] }, void 0));
};
export const XMappingDestinationItem = (props) => {
    const updateXarrow = useXarrow();
    const [isCollapsed, setIsCollapsed] = React.useState(false);
    React.useEffect(() => {
        updateXarrow();
    }, [isCollapsed]);
    let currentPath = props.path === "" ? props.field.name : `${props.path}.${props.field.name}`;
    const onSelect = (event) => {
        event.stopPropagation();
        props.editContext.selectedDestination = currentPath;
        StateManager.propertyChanged(props.editContext, "selectedDestination");
    };
    const getActionElem = () => {
        if (!(props.field instanceof ObjectDataDefinition)) {
            return null;
        }
        return (_jsx(ObserveState, { listenTo: props.editContext, properties: ["selectedDestination"], control: () => (_jsx(ActionsRender, { children: _jsx(ActionButton, Object.assign({ onClick: (event) => {
                        event.stopPropagation();
                        setIsCollapsed(!isCollapsed);
                    } }, { children: !isCollapsed ? _jsx(CollapseIcon, {}, void 0) : _jsx(ExpandGrayIcon, {}, void 0) }), void 0) }, void 0)) }, void 0));
    };
    const getCurrentElem = () => {
        return (_jsx(ObserveState, { listenTo: props.editContext, control: () => {
                let isNotUsed = !props.definition.getMappingRuleByTargetPath(currentPath);
                if (props.path !== "") {
                    return (_jsx(Droppable, Object.assign({ droppableId: `${XMappingConstants.MAPPING_PREFIX_DESTINATION_ITEM}${currentPath}`, isDropDisabled: !isNotUsed }, { children: (provided, snapshot) => {
                            return (_jsxs(XMappingSubItemRender, Object.assign({ id: `${XMappingConstants.MAPPING_PREFIX_DESTINATION_ITEM}${currentPath}`, onClick: onSelect, isCollapsed: props.isCollapsed, isDraggingOver: snapshot.isDraggingOver, ref: provided.innerRef }, provided.droppableProps, { children: [props.field.name, _jsx(XMappingItemConnector, { id: `${XMappingConstants.MAPPING_PREFIX_DESTINATION_ITEM}${currentPath}_connector` }, void 0),
                                    _jsx("div", Object.assign({ style: { display: "none" } }, { children: provided.placeholder }), void 0), getActionElem(), isNotUsed && (_jsx(DragConnector, { draggableId: `${XMappingConstants.MAPPING_PREFIX_DESTINATION_ITEM}${currentPath}`, direction: "left", icon: _jsx(PlusBlueIcon, {}, void 0), onMouseUp: (event) => {
                                            props.definition.addMappingRuleFromDestination(currentPath);
                                            StateManager.propertyChanged(props.definition, "mappingRules");
                                        } }, void 0))] }), void 0));
                        } }), void 0));
                }
                return (_jsx(Droppable, Object.assign({ droppableId: `${XMappingConstants.MAPPING_PREFIX_DESTINATION_ITEM}${currentPath}`, isDropDisabled: !isNotUsed }, { children: (provided, snapshot) => {
                        return (_jsxs(XMappingItemRender, Object.assign({ id: `${XMappingConstants.MAPPING_PREFIX_DESTINATION_ITEM}${currentPath}`, onClick: onSelect, isDraggingOver: snapshot.isDraggingOver, ref: provided.innerRef }, provided.droppableProps, { children: [currentPath, _jsx(XMappingItemConnector, { id: `${XMappingConstants.MAPPING_PREFIX_DESTINATION_ITEM}${currentPath}_connector` }, void 0),
                                _jsx("div", Object.assign({ style: { display: "none" } }, { children: provided.placeholder }), void 0), getActionElem(), isNotUsed && (_jsx(DragConnector, { draggableId: `${XMappingConstants.MAPPING_PREFIX_DESTINATION_ITEM}${currentPath}`, direction: "left", icon: _jsx(PlusBlueIcon, {}, void 0), onMouseUp: () => {
                                        props.definition.addMappingRuleFromDestination(currentPath);
                                        StateManager.propertyChanged(props.definition, "mappingRules");
                                    } }, void 0))] }), void 0));
                    } }), void 0));
            } }, void 0));
    };
    return (_jsxs(_Fragment, { children: [getCurrentElem(), props.field instanceof ObjectDataDefinition && (_jsx(XMappingDestinationChildreWrapper, Object.assign({ isCollapsed: isCollapsed }, { children: props.field.fields.map((field, idx) => (_jsxs(React.Fragment, { children: [_jsx(XMappingDestinationItem, { field: field, path: currentPath, editContext: props.editContext, definition: props.definition, isCollapsed: isCollapsed }, void 0),
                        !isCollapsed && (_jsx(Xarrow, { start: `${XMappingConstants.MAPPING_PREFIX_DESTINATION_ITEM}${currentPath}_connector`, startAnchor: "bottom", endAnchor: "right", end: `${XMappingConstants.MAPPING_PREFIX_DESTINATION_ITEM}${currentPath}.${field.name}`, color: "#c6c9da", showHead: false, path: "grid", strokeWidth: 1 }, void 0))] }, idx))) }), void 0))] }, void 0));
};
const XMappingDestinationRender = styled.div `
    width: 300px;
    border-left: 1px dashed rgba(64, 80, 166, 0.2);
    display: flex;
    flex-direction: column;
    height: 100%;
`;
const XMappingDestinationChildreWrapper = styled.div `
    padding: 0 25px 0 8px;
    position: relative;

    ${(props) => !props.isCollapsed
    ? `
                > * {
                    margin-top: 8px;
            
                    &:first-child {
                        margin-top: 0;
                    }
                }
            `
    : `margin: 0;`}
`;
const XMappingItemConnector = styled.div `
    position: absolute;
    top: 100%;
    right: 8px;
`;
//# sourceMappingURL=XMappingDestination.js.map