import React, { useMemo } from 'react';
import classnames from 'classnames';
import { getMatrixData } from '../../helpers';
import { useStyles } from './styles';
export var IntersectionsMatrix = function (_a) {
    var xScale = _a.xScale, yScale = _a.yScale, intersections = _a.intersections, sets = _a.sets, transform = _a.transform, hoveredIntersection = _a.hoveredIntersection;
    var styles = useStyles();
    var _b = useMemo(function () { return getMatrixData(xScale, yScale, intersections, sets); }, [xScale, yScale, intersections, sets]), circles = _b.circles, lines = _b.lines;
    var checkDimmed = function (i) { return hoveredIntersection && hoveredIntersection.index !== i; };
    return (React.createElement("g", { transform: transform },
        circles.map(function (_a, i) {
            var _b;
            var cx = _a.cx, cy = _a.cy, isPresent = _a.isPresent, intersectionIndex = _a.intersectionIndex;
            return (React.createElement("circle", { key: "matrix-circle-".concat(i), cx: cx, cy: cy, r: 8, className: classnames(styles.circle, (_b = {},
                    _b[styles.activeCircle] = isPresent,
                    _b[styles.dimmedCircle] = isPresent && checkDimmed(intersectionIndex),
                    _b)) }));
        }),
        lines.map(function (_a, i) {
            var _b;
            var x = _a.x, y1 = _a.y1, y2 = _a.y2, intersectionIndex = _a.intersectionIndex;
            return (React.createElement("line", { key: "matrix-line-".concat(i), x1: x, y1: y1, x2: x, y2: y2, className: classnames(styles.link, (_b = {},
                    _b[styles.dimmedLine] = checkDimmed(intersectionIndex),
                    _b)) }));
        })));
};
