import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from "styled-components";
import ReactDraggable from "react-draggable";
import { MappingRuleViewType } from "../XMappingDefinition";
import { XExpressionView } from "../../../Expressions/XExpressionView";
import { ExpresssionIcon } from "../../Icon/ExpresssionIcon";
import { StateManager } from "../../StateManagement/StateManager";
import { DeleteGrayIcon } from "../../Icon/DeleteGrayIcon";
import { DragIcon } from "../../Icon/DragIcon";
import { ExpandGrayIcon } from "../../Icon/ExpandGrayIcon";
import { ActionButton, ActionsRender } from "../CommonStyles";
import { DragConnector } from "./DragConnector";
import { XMappingConstants } from "../XMappingConstants";
import { Droppable } from "react-beautiful-dnd";
export const XMappingRule = (props) => {
    const { mappingRule, definition, editContext } = props;
    const onDelete = (rule) => {
        definition.removeMappingRule(rule.id);
        StateManager.propertyChanged(definition, "mappingRules");
    };
    return (_jsx(ReactDraggable, Object.assign({ position: { x: mappingRule.x, y: mappingRule.y }, handle: ".move", onStop: (_e, data) => {
            if (data.y < XMappingConstants.ACTION_AREA_HEIGHT) {
                data.y = XMappingConstants.ACTION_AREA_HEIGHT;
            }
            mappingRule.x = data.x;
            mappingRule.y = data.y;
            mappingRule.desiredX = data.x;
            mappingRule.desiredY = data.y;
            StateManager.changed(mappingRule);
            editContext.onMappingRuleMove();
        }, bounds: "parent" }, { children: _jsx(XMappingRuleWrapper, Object.assign({ position: { x: mappingRule.x, y: mappingRule.y } }, { children: _jsx(Droppable, Object.assign({ droppableId: `${XMappingConstants.MAPPING_PREFIX_RULE_ITEM}${mappingRule.id}`, isDropDisabled: mappingRule.targetPath !== "" }, { children: (provided, snapshot) => {
                    return (_jsxs(XMappingRuleRender, Object.assign({ collapsed: mappingRule.viewType === MappingRuleViewType.SMALL, id: mappingRule.id, ref: provided.innerRef }, provided.droppableProps, { children: [mappingRule.viewType === MappingRuleViewType.SMALL ? (_jsx(CollapsedRender, Object.assign({ onClick: (event) => {
                                    event.stopPropagation();
                                    mappingRule.viewType = MappingRuleViewType.EXPANDED;
                                    StateManager.changed(mappingRule);
                                    editContext.onMappingRuleViewChanged();
                                } }, { children: _jsx(ExpresssionIcon, {}, void 0) }), void 0)) : (_jsx(XExpressionView, { expression: mappingRule.mapping, hideValidation: true, onDone: () => {
                                    StateManager.changed(mappingRule);
                                }, color: {
                                    result: "#4050A6",
                                    expression: "#4050A6",
                                    variable: "rgba(39, 41, 50, 0.6)",
                                    value: "rgb(39, 41, 50)",
                                } }, void 0)),
                            mappingRule.targetPath === "" && _jsx(DragConnector, { draggableId: mappingRule.id }, void 0), provided.placeholder, _jsxs(ActionsRender, Object.assign({ className: "ActionsRender" }, { children: [_jsx(ActionButton, Object.assign({ onClick: (event) => {
                                            event.stopPropagation();
                                            onDelete(mappingRule);
                                        } }, { children: _jsx(DeleteGrayIcon, {}, void 0) }), void 0),
                                    mappingRule.viewType === MappingRuleViewType.EXPANDED && (_jsx(ActionButton, Object.assign({ onClick: (event) => {
                                            event.stopPropagation();
                                            mappingRule.viewType = MappingRuleViewType.SMALL;
                                            StateManager.changed(mappingRule);
                                            editContext.onMappingRuleViewChanged();
                                        } }, { children: _jsx(ExpandGrayIcon, {}, void 0) }), void 0)),
                                    _jsx(ActionButton, Object.assign({ className: "move" }, { children: _jsx(DragIcon, {}, void 0) }), void 0)] }), void 0)] }), void 0));
                } }), void 0) }), void 0) }), void 0));
};
export const XMappingRuleRender = styled.div `
    background: #ffffff;

    border: 1px solid #4050a6;
    box-sizing: border-box;
    border-radius: 4px;

    position: relative;

    max-width: max-content;

    &:hover {
        &::before {
            content: "";
            position: absolute;
            top: -6px;
            bottom: -6px;
            right: -6px;
            left: -6px;
            border: 2px solid rgb(62, 155, 222, 0.2);
            box-sizing: border-box;
            border-radius: 8px;
        }
    }

    .ActionsRender,
    .drag-connector {
        opacity: 0;
        transition: opacity 0.1s ease-in;
    }

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

    &:hover .ActionsRender,
    &:hover .drag-connector {
        opacity: 1;
    }
`;
const CollapsedRender = styled.div `
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;

    position: relative;
`;
const XMappingRuleWrapper = styled.div `
    position: absolute;

    z-index: 2;

    &:not(.react-draggable-dragging) {
        ${(props) => `
            top: ${props.position.y}px;
            left: ${props.position.x}px;
        `}
        transform: none !important;
    }
`;
//# sourceMappingURL=XMappingRule.js.map