import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import styled from "styled-components";
import Xarrow, { useXarrow } from "@appglue/xarrow/lib";
import { MappingRuleViewType } from "../XMappingDefinition";
import { ActionButton, XMappingSectionHeader } from "../CommonStyles";
import { PlusBlueIcon } from "../../Icon/PlusBlueIcon";
import { StateManager } from "../../StateManagement/StateManager";
import { ObserveState } from "../../StateManagement/ObserveState";
import { XMappingRule } from "./XMappingRule";
import { Droppable } from "react-beautiful-dnd";
import { XMappingConstants } from "../XMappingConstants";
import { DeleteGrayIcon } from "../../Icon/DeleteGrayIcon";
import { EditStackIcon } from "../../Icon/EditStackIcon";
import { ValidationInformation } from "../../../Rule/DesignUI/ValidationInformation";
import { ReactRenderHook } from "../../ReactRenderHook";
export const XMappingRules = (props) => {
    const { definition } = props;
    const updateXarrow = useXarrow();
    const onEditRule = (rule) => {
        if (rule.viewType === MappingRuleViewType.HIDDEN) {
            rule.viewType = MappingRuleViewType.EXPANDED;
            StateManager.changed(rule);
        }
    };
    const onDelete = (rule) => {
        definition.removeMappingRule(rule.id);
        StateManager.propertyChanged(definition, "mappingRules");
    };
    const onDeleteTarget = (rule) => {
        if (rule.viewType === MappingRuleViewType.HIDDEN) {
            onDelete(rule);
        }
        else {
            rule.deleteTarget();
            StateManager.changed(rule);
            StateManager.changed(definition);
        }
    };
    return (_jsx(_Fragment, { children: _jsxs(XMappingExpressionsRender, { children: [_jsxs(XMappingSectionHeader, { children: ["Expressions", _jsx(AddExpressionButton, Object.assign({ onClick: () => {
                                props.definition.addMappingRule();
                                StateManager.propertyChanged(props.definition, "mappingRules");
                            }, "data-testid": "MappingRuleAddBtn" }, { children: _jsx(PlusBlueIcon, {}, void 0) }), void 0)] }, void 0),
                _jsx(ObserveState, { listenTo: props.definition, properties: ["mappingRules"], control: () => {
                        const { mappingRules } = props.definition;
                        return (_jsxs(_Fragment, { children: [_jsx(Droppable, Object.assign({ droppableId: XMappingConstants.MAPPING_RULES_DROPPABLE_ID }, { children: (provided, snapshot) => {
                                        return (_jsxs(XMappingExpressions, Object.assign({ ref: provided.innerRef }, provided.droppableProps, { onScroll: updateXarrow }, { children: [mappingRules.map((rule) => {
                                                    if (rule.viewType === MappingRuleViewType.HIDDEN)
                                                        return null;
                                                    return (_jsx(ObserveState, { listenTo: rule, control: () => {
                                                            return (_jsx(XMappingRule, { mappingRule: rule, editContext: props.editContext, definition: props.definition }, void 0));
                                                        } }, rule.id));
                                                }), provided.placeholder, _jsx(ReactRenderHook, {}, void 0)] }), void 0));
                                    } }), void 0),
                                _jsx(ValidationInformation, { provider: props.definition }, void 0)] }, void 0));
                    } }, void 0),
                _jsx(ObserveState, { listenTo: props.definition, properties: ["mappingRules"], control: () => {
                        const { mappingRules } = props.definition;
                        return (_jsx(_Fragment, { children: mappingRules.map((mappingRule) => {
                                return (_jsx(ObserveState, { listenTo: mappingRule, control: () => {
                                        let paths = mappingRule.getInboundPaths();
                                        if (mappingRule.viewType === MappingRuleViewType.HIDDEN) {
                                            // add xarrow for direct
                                            return (_jsx(_Fragment, { children: paths.map((p) => (_jsx(Xarrow, { start: `${XMappingConstants.MAPPING_PREFIX_SOURCE_ITEM}${p}`, end: `${XMappingConstants.MAPPING_PREFIX_DESTINATION_ITEM}${mappingRule.targetPath}`, endAnchor: "left", startAnchor: "right", color: XMappingConstants.MAPPING_LINE_COLOR, strokeWidth: 1, showHead: false, labels: {
                                                        middle: (_jsxs(LineActionRender, { children: [_jsx(ActionButton, Object.assign({ onClick: () => onEditRule(mappingRule) }, { children: _jsx(EditStackIcon, {}, void 0) }), void 0),
                                                                _jsx(ActionButton, Object.assign({ onClick: () => onDelete(mappingRule) }, { children: _jsx(DeleteGrayIcon, {}, void 0) }), void 0)] }, void 0)),
                                                    } }, p))) }, void 0));
                                        }
                                        return (_jsxs(_Fragment, { children: [mappingRule.targetPath !== "" && (_jsx(Xarrow, { end: `destination_${mappingRule.targetPath}`, start: mappingRule.id, startAnchor: "right", color: XMappingConstants.MAPPING_LINE_COLOR, strokeWidth: 1, showHead: false, labels: {
                                                        middle: (_jsx(LineActionRender, { children: _jsx(ActionButton, Object.assign({ onClick: () => onDeleteTarget(mappingRule) }, { children: _jsx(DeleteGrayIcon, {}, void 0) }), void 0) }, void 0)),
                                                    } }, void 0)),
                                                paths.map((p) => (_jsx(Xarrow, { end: `${XMappingConstants.MAPPING_PREFIX_SOURCE_ITEM}${p}`, start: mappingRule.id, endAnchor: "right", color: XMappingConstants.MAPPING_LINE_COLOR, strokeWidth: 1, showHead: false }, p)))] }, void 0));
                                    } }, mappingRule.id));
                            }) }, void 0));
                    } }, void 0)] }, void 0) }, void 0));
};
const XMappingExpressionsRender = styled.div `
    flex: 1;
    background: rgba(64, 80, 166, 0.05);

    display: flex;
    flex-direction: column;

    position: relative;
`;
export const AddExpressionButton = styled.div `
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;
    border: 1px solid rgba(39, 41, 50, 0.2);
    box-sizing: border-box;
    box-shadow: 0px 4px 8px -2px rgba(39, 41, 50, 0.04);
    border-radius: 23px;
    transition: opacity 0.1s ease-in;

    cursor: pointer;

    &:hover {
        opacity: 0.8;
    }
`;
export const XMappingExpressions = styled.div `
    flex: 1;
    position: relative;

    overflow: auto;
`;
const LineActionRender = styled.div `
    display: flex;
    align-items: center;

    opacity: 0;

    &:hover {
        opacity: 1;
    }
`;
//# sourceMappingURL=XMappingRules.js.map