"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.XMappingRule = 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 ExpressionView_1 = require("../../Expressions/Builder/ExpressionView");
const ExpressionIcon_1 = require("../../CommonUI/Icon/ExpressionIcon");
const CommonStyles_1 = require("../Builder/CommonStyles");
const MappingConstants_1 = require("@appglue/common/dist/Mapping/MappingConstants");
const react_beautiful_dnd_1 = require("react-beautiful-dnd");
const ExpressionValueType_1 = require("@appglue/common/dist/Expressions/ExpressionValueType");
const VariableIcon_1 = require("../../CommonUI/Icon/VariableIcon");
const ConstantIcon_1 = require("../../CommonUI/Icon/ConstantIcon");
const EditGrayIcon_1 = require("../../CommonUI/Icon/EditGrayIcon");
const core_1 = require("@material-ui/core");
const DeleteDropdown_1 = require("./DeleteDropdown");
const AttentionIcon_1 = require("../../CommonUI/Icon/AttentionIcon");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const XMappingRuleExists = ({ isInvalid, isDraggingOver, size, mappingRule, definition, editContext, }) => {
    const [expressionViewEl, setExpresssionViewEl] = react_1.default.useState(null);
    const [openExp, setOpenExp] = react_1.default.useState(false);
    const setRef = (ref) => {
        setExpresssionViewEl(ref);
    };
    let icon = (0, jsx_runtime_1.jsx)(VariableIcon_1.VariableIcon, {});
    if (mappingRule.mapping.valueType === ExpressionValueType_1.ExpressionValueType.VALUE) {
        icon = (0, jsx_runtime_1.jsx)(ConstantIcon_1.ConstantIcon, {});
    }
    else if (mappingRule.mapping.valueType === ExpressionValueType_1.ExpressionValueType.SUBEXPRESSION) {
        icon = (0, jsx_runtime_1.jsx)(ExpressionIcon_1.ExpressionIcon, {});
    }
    let forSourceId = editContext.ruleIdForSource(mappingRule.id);
    let forDestinationId = editContext.ruleIdForDestination(mappingRule.id);
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [mappingRule.getValidationIssue(definition.getExecutionResult()).length > 0 && ((0, jsx_runtime_1.jsx)(MappingRuleError, { children: (0, jsx_runtime_1.jsx)(AttentionIcon_1.AttentionIcon, {}) })), (0, jsx_runtime_1.jsx)(XMappingRuleExpressionRender, { size: size, isDraggingOver: isDraggingOver, isInvalid: isInvalid, onClick: (event) => {
                    event.stopPropagation();
                    setOpenExp(true);
                }, isHighlighted: editContext.isHighlighted(mappingRule.id), children: icon }), (0, jsx_runtime_1.jsx)(XMappingConnectorForSource, { id: forSourceId }), (0, jsx_runtime_1.jsx)(XMappingConnectorForDestination, { id: forDestinationId }), (0, jsx_runtime_1.jsx)(ElementForPopper, { ref: setRef }), editContext.hoveredExpression !== mappingRule.id && ((0, jsx_runtime_1.jsx)(XExpressionRender, { open: false, children: (0, jsx_runtime_1.jsx)(ExpressionView_1.ExpressionView, { expression: mappingRule.mapping, hideValidation: true, onDone: () => {
                        StateManager_1.StateManager.changed(definition);
                    }, open: openExp, color: {
                        result: UIStyleConstants_1.UIStyleConstants.BLUE_COLOR,
                        expression: UIStyleConstants_1.UIStyleConstants.BLUE_COLOR,
                        variable: "rgba(39, 41, 50, 0.6)",
                        value: "rgb(39, 41, 50)",
                    } }) })), (0, jsx_runtime_1.jsx)(StyledPopper, { open: editContext.hoveredExpression === mappingRule.id, anchorEl: expressionViewEl, placement: "left-start", transition: false, children: (0, jsx_runtime_1.jsxs)(XExpressionRender, { className: "ExpressionView", onClick: () => setOpenExp(true), open: editContext.hoveredExpression === mappingRule.id, children: [mappingRule.mapping.valueType !== ExpressionValueType_1.ExpressionValueType.UNSET && ((0, jsx_runtime_1.jsxs)(CommonStyles_1.ActionsRender, { children: [(0, jsx_runtime_1.jsx)(CommonStyles_1.ActionButton, { onClick: (event) => {
                                        event.stopPropagation();
                                        setOpenExp(true);
                                    }, children: (0, jsx_runtime_1.jsx)(EditGrayIcon_1.EditGrayIcon, {}) }), (0, jsx_runtime_1.jsx)(DeleteDropdown_1.DeleteDropdown, { mappingRule: mappingRule, definition: definition })] })), (0, jsx_runtime_1.jsx)(ExpressionView_1.ExpressionView, { expression: mappingRule.mapping, hideValidation: true, onDone: () => {
                                StateManager_1.StateManager.changed(definition);
                            }, open: openExp, color: {
                                result: UIStyleConstants_1.UIStyleConstants.BLUE_COLOR,
                                expression: UIStyleConstants_1.UIStyleConstants.BLUE_COLOR,
                                variable: "rgba(39, 41, 50, 0.6)",
                                value: "rgb(39, 41, 50)",
                            } })] }) })] }));
};
const XMappingRuleExpression = ({ mappingRule, size, isDraggingOver, isInvalid, definition, editContext, }) => {
    const [openExp, setOpenExp] = react_1.default.useState(false);
    if (mappingRule.empty) {
        return ((0, jsx_runtime_1.jsxs)(EmptyExpression, { className: "EmptyRule-root", children: [(0, jsx_runtime_1.jsx)(XMappingRuleExpressionRender, { size: size, isDraggingOver: isDraggingOver, onClick: (event) => {
                        event.stopPropagation();
                        mappingRule.mapping.valueType = ExpressionValueType_1.ExpressionValueType.SUBEXPRESSION;
                        setOpenExp(true);
                    }, children: (0, jsx_runtime_1.jsx)(ExpressionIcon_1.ExpressionIcon, {}) }), (0, jsx_runtime_1.jsx)(XMappingRuleExpressionRender, { size: size, isDraggingOver: isDraggingOver, onClick: (event) => {
                        event.stopPropagation();
                        mappingRule.mapping.valueType = ExpressionValueType_1.ExpressionValueType.VALUE;
                        setOpenExp(true);
                    }, children: (0, jsx_runtime_1.jsx)(ConstantIcon_1.ConstantIcon, {}) }), (0, jsx_runtime_1.jsx)(ExpressionView_1.ExpressionView, { expression: mappingRule.mapping, hideValidation: true, onDone: () => {
                        StateManager_1.StateManager.changed(definition);
                    }, open: openExp, color: {
                        result: UIStyleConstants_1.UIStyleConstants.BLUE_COLOR,
                        expression: UIStyleConstants_1.UIStyleConstants.BLUE_COLOR,
                        variable: "rgba(39, 41, 50, 0.6)",
                        value: "rgb(39, 41, 50)",
                    } })] }));
    }
    return ((0, jsx_runtime_1.jsx)(XMappingRuleExists, { size: size, isDraggingOver: isDraggingOver, isInvalid: isInvalid, mappingRule: mappingRule, definition: definition, editContext: editContext }));
};
const XMappingRule = (props) => {
    const { mappingRule, definition, editContext } = props;
    let forSourceId = `${MappingConstants_1.MappingConstants.MAPPING_PREFIX_RULE_ITEM}${mappingRule.targetPath}_connector_forsource`;
    let forDestinationId = `${MappingConstants_1.MappingConstants.MAPPING_PREFIX_RULE_ITEM}${mappingRule.targetPath}_connector_fordestination`;
    let isCollapsed = props.editContext.isDestinationCollapsed(mappingRule.targetPath);
    if (isCollapsed) {
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(XMappingConnectorForSource, { id: forSourceId }), (0, jsx_runtime_1.jsx)(XMappingConnectorForDestination, { id: forDestinationId })] }));
    }
    return ((0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Droppable, { droppableId: `${MappingConstants_1.MappingConstants.MAPPING_PREFIX_RULE_ITEM}${mappingRule.id}`, isDropDisabled: mappingRule.mapping.valueType === ExpressionValueType_1.ExpressionValueType.SUBEXPRESSION ||
            mappingRule.mapping.valueType === ExpressionValueType_1.ExpressionValueType.UNSET ||
            mappingRule.mapping.valueType === ExpressionValueType_1.ExpressionValueType.VALUE, children: (provided, snapshot) => {
            return ((0, jsx_runtime_1.jsxs)(XMappingRuleRender, { ref: provided.innerRef, isDraggingOver: snapshot.isDraggingOver, ...provided.droppableProps, isInvalid: props.isInvalid, onMouseEnter: () => {
                    editContext.hoveredExpression = mappingRule.id;
                }, onMouseLeave: () => {
                    editContext.hoveredExpression = undefined;
                }, children: [(0, jsx_runtime_1.jsx)(XMappingRuleExpression, { mappingRule: mappingRule, editContext: props.editContext, definition: definition, size: mappingRule.targetPath.includes(".") ? "Small" : "Medium", isDraggingOver: snapshot.isDraggingOver, isInvalid: props.isInvalid }), (0, jsx_runtime_1.jsx)(CommonStyles_1.HiddenPlaceholderWrapper, { children: provided.placeholder })] }));
        } }));
};
exports.XMappingRule = XMappingRule;
const XMappingRuleRender = styled_components_1.default.div `
    box-sizing: border-box;
    position: relative;

    .drag-connector {
        opacity: 0;
    }

    .drag-connector.isdragging {
        opacity: 1;
    }

    cursor: pointer;

    ${(props) => !props.isInvalid &&
    !props.isDraggingOver &&
    `
            &:hover > .drag-connector {
                opacity: 1;
            }
        `}
`;
const XMappingRuleExpressionRender = styled_components_1.default.div `
    ${(props) => props.isInvalid ? "" : props.isDraggingOver ? "background: rgba(64, 80, 166, 0.4);" : "background: #ffffff;"}

    display: flex;

    border: 1px solid
        ${(props) => props.isInvalid
    ? "rgba(39, 41, 50, 0.2)"
    : props.isHighlighted
        ? MappingConstants_1.MappingConstants.HIGHLIGHT_MAPPING_LINE_COLOR
        : UIStyleConstants_1.UIStyleConstants.BLUE_COLOR};
    box-sizing: border-box;
    border-radius: 4px;
    ${(props) => props.size === "Small"
    ? `
                width: 28px;
                height: 28px;
                padding: 5px;

                img {
                    width: 16px;
                    height: 16px;
                }
            `
    : `
                width: 40px;
                height: 40px;
                padding: 9px;

                img {
                    width: 20px;
                    height: 20px;
                }
            `}
`;
const EmptyExpression = styled_components_1.default.div `
    display: flex;
    align-items: center;

    opacity: 0;
    transition: opacity 0.1s ease-in;

    .ExpressionView-root {
        display: none;
    }
`;
const XMappingConnectorForSource = styled_components_1.default.div `
    position: absolute;
    top: 50%;
    left: 0;
`;
const XMappingConnectorForDestination = styled_components_1.default.div `
    position: absolute;
    top: 50%;
    right: 0px;
`;
const XExpressionRender = styled_components_1.default.div `
    position: relative;

    background: #fff;

    box-sizing: border-box;

    transition: all 0.1s ease-in;

    z-index: 1;

    ${(props) => !props.open
    ? `
                height: 0;
                width: 0;
                overflow: hidden;
            `
    : `
                border: 2px solid ${MappingConstants_1.MappingConstants.HIGHLIGHT_MAPPING_LINE_COLOR};
                border-radius: 8px;
                padding: 2px;

            `}
`;
const StyledPopper = (0, styled_components_1.default)(core_1.Popper) `
    .ExpressionView-root {
        border: 1px solid #4050a6;
        box-sizing: border-box;
        box-shadow: 0px 4px 15px -2px rgba(39, 41, 50, 0.12);
        border-radius: 4px;
    }
`;
const ElementForPopper = styled_components_1.default.div `
    position: absolute;
    left: 0;
    top: calc(50% + 5px);
`;
const MappingRuleError = styled_components_1.default.div `
    position: absolute;
    top: -5px;
    right: 5px;
`;
//# sourceMappingURL=XMappingRule.js.map