"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useEdgeLabelsRenderer = exports.HOVERS_CUSTOM_EDGE_LABELS_CANVAS_NAME = exports.EDGE_DOTS_CANVAS_NAME = exports.CUSTOM_EDGE_LABELS_CANVAS_NAME = void 0;
var react_1 = require("react");
var core_1 = require("@react-sigma/core");
var mdm_sdk_1 = require("@reltio/mdm-sdk");
var useSigmaCustomRenderers_1 = require("../../hooks/useSigmaCustomRenderers");
var graphDataTypes_1 = require("../../types/graphDataTypes");
var label_1 = require("../../rendering/canvas/label");
var utils_1 = require("../../rendering/canvas/utils");
var edgeLabelHelpers_1 = require("../helpers/edgeLabelHelpers");
exports.CUSTOM_EDGE_LABELS_CANVAS_NAME = 'customEdgeLabels';
exports.EDGE_DOTS_CANVAS_NAME = 'edgeDots';
exports.HOVERS_CUSTOM_EDGE_LABELS_CANVAS_NAME = 'customEdgeLabelsHovers';
var useEdgeLabelsRenderer = function (_a) {
    var graph = _a.graph, onEdgeLabelClick = _a.onEdgeLabelClick;
    var sigma = (0, core_1.useSigma)();
    var settings = sigma.getSettings();
    var registerEvents = (0, core_1.useRegisterEvents)();
    var _b = (0, useSigmaCustomRenderers_1.useSigmaCustomRenderers)(), addCustomRenderers = _b.addRenderers, canvasesRef = _b.canvasesRef;
    var _c = canvasesRef.current, _d = exports.CUSTOM_EDGE_LABELS_CANVAS_NAME, canvas = _c[_d];
    var edgeLabelsPathsMap = (0, react_1.useRef)({});
    var _e = (0, react_1.useState)(), hoveredEdgeLabel = _e[0], setHoveredEdgeLabel = _e[1];
    var _f = (0, react_1.useState)(false), canvasIsAdded = _f[0], setCanvasIsAdded = _f[1];
    var shouldRenderLabels = (0, react_1.useCallback)(function (edgeId, sourceId, targetId) {
        var edgeDisplayData = sigma.getEdgeDisplayData(edgeId);
        var sourceDisplayData = sigma.getNodeDisplayData(sourceId);
        var targetDisplayData = sigma.getNodeDisplayData(targetId);
        var relationEdge = [sourceDisplayData.nodeType, targetDisplayData.nodeType].every(function (type) { return type === graphDataTypes_1.DataModelGraphNodeType.entityType; });
        return relationEdge && !edgeDisplayData.hidden && edgeDisplayData.label;
    }, [sigma]);
    var drawEdgeLabel = (0, react_1.useCallback)(function (context, edgeId, sourceId, targetId) {
        delete edgeLabelsPathsMap.current[edgeId];
        var edgeDisplayData = sigma.getEdgeDisplayData(edgeId);
        if (shouldRenderLabels(edgeId, sourceId, targetId)) {
            var isHovered = hoveredEdgeLabel === edgeId;
            var isSelected = edgeDisplayData.selected;
            var fontScale = isHovered ? 1.2 : 1;
            var _a = (0, edgeLabelHelpers_1.getEdgeCenter)(edgeId, sourceId, targetId, sigma), x = _a.x, y = _a.y;
            var path = (0, label_1.drawLabel)(context, {
                label: edgeDisplayData.label,
                labelColor: edgeDisplayData.labelColor,
                x: x,
                y: y,
                size: sigma.scaleSize(4)
            }, __assign(__assign({}, settings), { labelSize: settings.labelSize * fontScale }), {
                backgroundColor: "rgba(250, 250, 250, ".concat(isSelected || isHovered ? '1' : '0.9', ")"),
                borderColor: isSelected ? '#0072CE' : undefined
            });
            edgeLabelsPathsMap.current[edgeId] = path;
        }
    }, 
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [sigma, hoveredEdgeLabel, shouldRenderLabels]);
    var drawEdgeDot = (0, react_1.useCallback)(function (context, edgeId, sourceId, targetId) {
        var edgeDisplayData = sigma.getEdgeDisplayData(edgeId);
        if (shouldRenderLabels(edgeId, sourceId, targetId)) {
            var isHovered = hoveredEdgeLabel === edgeId;
            var isSelected = edgeDisplayData.selected;
            var dotScale = isHovered || isSelected ? 1.4 : 1;
            var circleRadius = sigma.scaleSize(2 * dotScale);
            var _a = (0, edgeLabelHelpers_1.getEdgeCenter)(edgeId, sourceId, targetId, sigma), x = _a.x, y = _a.y;
            context.beginPath();
            context.arc(x, y, circleRadius, 0, Math.PI * 2);
            context.fillStyle = (0, mdm_sdk_1.rgbaToRgb)(edgeDisplayData.color);
            context.fill();
        }
    }, [sigma, hoveredEdgeLabel, shouldRenderLabels]);
    (0, react_1.useEffect)(function () {
        var timer;
        var checkCanvas = function () {
            var _a = canvasesRef.current, _b = exports.CUSTOM_EDGE_LABELS_CANVAS_NAME, canvas = _a[_b];
            if (canvas) {
                setCanvasIsAdded(true);
            }
            else {
                timer = setTimeout(checkCanvas, 100);
            }
        };
        checkCanvas();
        return function () {
            clearTimeout(timer);
        };
    }, [canvasesRef]);
    (0, react_1.useEffect)(function () {
        registerEvents({
            click: function (event) {
                if (hoveredEdgeLabel) {
                    onEdgeLabelClick(hoveredEdgeLabel, event.original);
                    setHoveredEdgeLabel(null);
                }
            },
            mousemove: function (event) {
                if (!canvas)
                    return;
                var context = canvas.context, canvasElement = canvas.canvasElement;
                var _a = (0, utils_1.getCanvasMousePos)(canvasElement, event.original), x = _a.x, y = _a.y;
                var hoveredEdgeLabel = null;
                for (var id in edgeLabelsPathsMap.current) {
                    var path = edgeLabelsPathsMap.current[id];
                    if (context.isPointInPath(path, x, y)) {
                        hoveredEdgeLabel = id;
                        break;
                    }
                    else {
                        hoveredEdgeLabel = null;
                    }
                }
                setHoveredEdgeLabel(hoveredEdgeLabel);
            }
        });
    }, [sigma, canvas, registerEvents, hoveredEdgeLabel, onEdgeLabelClick, canvasIsAdded]);
    (0, react_1.useEffect)(function () {
        var _a;
        addCustomRenderers((_a = {},
            _a[exports.CUSTOM_EDGE_LABELS_CANVAS_NAME] = {
                renderer: function (context) {
                    graph.forEachEdge(function (edgeId, _edgeData, sourceId, targetId) {
                        if (edgeId !== hoveredEdgeLabel) {
                            drawEdgeLabel(context, edgeId, sourceId, targetId);
                        }
                    });
                },
                insertBefore: 'labels'
            },
            _a));
    }, [addCustomRenderers, graph, drawEdgeLabel, hoveredEdgeLabel]);
    (0, react_1.useEffect)(function () {
        var _a;
        addCustomRenderers((_a = {},
            _a[exports.EDGE_DOTS_CANVAS_NAME] = {
                renderer: function (context) {
                    graph.forEachEdge(function (edgeId, _edgeData, sourceId, targetId) {
                        if (edgeId !== hoveredEdgeLabel) {
                            drawEdgeDot(context, edgeId, sourceId, targetId);
                        }
                    });
                },
                insertBefore: 'edgeLabels'
            },
            _a));
    }, [addCustomRenderers, graph, drawEdgeDot, hoveredEdgeLabel]);
    (0, react_1.useEffect)(function () {
        var _a;
        addCustomRenderers((_a = {},
            _a[exports.HOVERS_CUSTOM_EDGE_LABELS_CANVAS_NAME] = {
                renderer: function (context) {
                    graph.forEachEdge(function (edgeId, _edgeData, sourceId, targetId) {
                        if (edgeId === hoveredEdgeLabel) {
                            drawEdgeLabel(context, edgeId, sourceId, targetId);
                            drawEdgeDot(context, edgeId, sourceId, targetId);
                        }
                    });
                },
                insertBefore: 'hovers'
            },
            _a));
    }, [addCustomRenderers, graph, drawEdgeLabel, drawEdgeDot, hoveredEdgeLabel]);
    return hoveredEdgeLabel;
};
exports.useEdgeLabelsRenderer = useEdgeLabelsRenderer;
