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 { useXarrow } from "@appglue/xarrow/lib";
import { ObjectDataDefinition } from "../../../Common/Data/Definitions/ObjectDataDefinition";
import { ActionsRender, ActionButton, XMappingItemRender, XMappingListRender, XMappingSectionHeader, XMappingSubItemRender, XMappingChildrenRender, } from "../CommonStyles";
import { StateManager } from "../../StateManagement/StateManager";
import { ObserveState } from "../../StateManagement/ObserveState";
import { CollapseIcon } from "../../Icon/CollapseIcon";
import { ExpandGrayIcon } from "../../Icon/ExpandGrayIcon";
import { DragConnector } from "./DragConnector";
import { Droppable } from "react-beautiful-dnd";
import { XMappingConstants } from "../XMappingConstants";
export const XMappingSource = (props) => {
    const updateXarrow = useXarrow();
    return (_jsx(Droppable, Object.assign({ droppableId: XMappingConstants.MAPPING_SOURCE_DROPPABLE_ID }, { children: (provided, snapshot) => {
            return (_jsxs("div", Object.assign({ ref: provided.innerRef }, provided.droppableProps, { children: [_jsxs(XMappingSourceRender, { children: [_jsx(XMappingSectionHeader, { children: "Source" }, void 0),
                            _jsx(XMappingListRender, Object.assign({ onScroll: updateXarrow }, { children: props.dataDefinition.fields.map((field, idx) => (_jsx(XMappingSourceItem, { field: field, path: "", editContext: props.editContext }, idx))) }), void 0)] }, void 0), provided.placeholder] }), void 0));
        } }), void 0));
};
export const XMappingSourceItem = (props) => {
    let currentPath = props.path === "" ? props.field.name : `${props.path}.${props.field.name}`;
    const updateXarrow = useXarrow();
    const [isCollapsed, setIsCollapsed] = React.useState(false);
    React.useEffect(() => {
        updateXarrow();
    }, [isCollapsed]);
    const onSelect = (event) => {
        event.stopPropagation();
        props.editContext.selectedSource = currentPath;
        StateManager.propertyChanged(props.editContext, "selectedSource");
    };
    const getActionElem = () => {
        if (!(props.field instanceof ObjectDataDefinition)) {
            return null;
        }
        return (_jsx(ActionsRender, Object.assign({ className: "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));
    };
    const getCurrentElem = () => {
        return (_jsx(ObserveState, { listenTo: props.editContext, properties: ["selectedSource"], control: () => {
                // deep level
                if (props.path !== "") {
                    return (_jsx(Droppable, Object.assign({ droppableId: `${XMappingConstants.MAPPING_PREFIX_SOURCE_ITEM}${currentPath}`, isDropDisabled: false }, { children: (provided, snapshot) => {
                            return (_jsxs(XMappingSubItemRender, Object.assign({ id: `${XMappingConstants.MAPPING_PREFIX_SOURCE_ITEM}${currentPath}`, onClick: onSelect, isDraggingOver: snapshot.isDraggingOver, isCollapsed: props.isCollapsed, ref: provided.innerRef }, provided.droppableProps, { children: [props.field.name, _jsx(XMappingItemConnector, { id: `${XMappingConstants.MAPPING_PREFIX_SOURCE_ITEM}${currentPath}_connector` }, void 0),
                                    _jsx("div", Object.assign({ style: { display: "none" } }, { children: provided.placeholder }), void 0), getActionElem(), _jsx(DragConnector, { draggableId: `${XMappingConstants.MAPPING_PREFIX_SOURCE_ITEM}${currentPath}` }, void 0)] }), void 0));
                        } }), void 0));
                }
                return (_jsx(Droppable, Object.assign({ droppableId: `${XMappingConstants.MAPPING_PREFIX_SOURCE_ITEM}${currentPath}` }, { children: (provided, snapshot) => {
                        return (_jsxs(XMappingItemRender, Object.assign({ id: `${XMappingConstants.MAPPING_PREFIX_SOURCE_ITEM}${currentPath}`, onClick: onSelect, isDraggingOver: snapshot.isDraggingOver, ref: provided.innerRef }, provided.droppableProps, { children: [props.field.name, _jsx(XMappingItemConnector, { id: `${XMappingConstants.MAPPING_PREFIX_SOURCE_ITEM}${currentPath}_connector` }, void 0), getActionElem(), _jsx(DragConnector, { draggableId: `${XMappingConstants.MAPPING_PREFIX_SOURCE_ITEM}${currentPath}` }, void 0),
                                _jsx("div", Object.assign({ style: { display: "none" } }, { children: provided.placeholder }), void 0)] }), void 0));
                    } }), void 0));
            } }, void 0));
    };
    return (_jsxs(_Fragment, { children: [getCurrentElem(), props.field instanceof ObjectDataDefinition && (_jsx(XMappingChildrenRender, Object.assign({ isCollapsed: isCollapsed }, { children: props.field.fields.map((field, idx) => (_jsxs(React.Fragment, { children: [_jsx(XMappingSourceItem, { field: field, path: currentPath, editContext: props.editContext, isCollapsed: isCollapsed }, void 0),
                        !isCollapsed && (_jsx(Xarrow, { start: `${XMappingConstants.MAPPING_PREFIX_SOURCE_ITEM}${currentPath}_connector`, startAnchor: "bottom", endAnchor: "left", end: `${XMappingConstants.MAPPING_PREFIX_SOURCE_ITEM}${currentPath}.${field.name}`, color: "#c6c9da", showHead: false, path: "grid", strokeWidth: 1 }, void 0))] }, idx))) }), void 0))] }, void 0));
};
const XMappingSourceRender = styled.div `
    width: 300px;

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

    height: 100%;
`;
const XMappingItemConnector = styled.div `
    position: absolute;
    top: 100%;
    left: 8px;
`;
//# sourceMappingURL=XMappingSource.js.map