"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UpSetChart = void 0;
var react_1 = __importStar(require("react"));
var d3_scale_1 = require("d3-scale");
var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
var SetsChart_1 = require("./components/SetsChart");
var IntersectionsMatrix_1 = require("./components/IntersectionsMatrix");
var IntersectionsChart_1 = require("./components/IntersectionsChart");
var useUpSetChartSizes_1 = require("./useUpSetChartSizes");
var constants_1 = require("./constants");
var helpers_1 = require("./helpers");
var styles_1 = require("./styles");
var UpSetChart = function (_a) {
    var data = _a.data, width = _a.width, height = _a.height;
    var styles = (0, styles_1.useStyles)({ width: width, height: height });
    var containerRef = (0, react_1.useRef)(null);
    var _b = (0, react_1.useState)(null), hoveredSet = _b[0], setHoveredSet = _b[1];
    var _c = (0, react_1.useState)(null), hoveredIntersection = _c[0], setHoveredIntersection = _c[1];
    var _d = (0, react_1.useState)([width, height]), _e = _d[0], availableWidth = _e[0], availableHeight = _e[1], setAvailableSize = _d[1];
    var _f = (0, react_1.useMemo)(function () { return (0, helpers_1.findIntersections)(data); }, [data]), intersections = _f.intersections, sets = _f.sets;
    var hoveredElements = (hoveredIntersection === null || hoveredIntersection === void 0 ? void 0 : hoveredIntersection.elements) || (hoveredSet === null || hoveredSet === void 0 ? void 0 : hoveredSet.elements);
    var tooltipTitle = hoveredIntersection === null || hoveredIntersection === void 0 ? void 0 : hoveredIntersection.sets.join(' ∩ ');
    var _g = (0, useUpSetChartSizes_1.useUpSetChartSizes)({ width: availableWidth, height: availableHeight, intersections: intersections, sets: sets }), labels = _g.labels, svgWidth = _g.svgWidth, svgHeight = _g.svgHeight, intersectionsChartWidth = _g.intersectionsChartWidth, intersectionsChartHeight = _g.intersectionsChartHeight, matrixY = _g.matrixY, matrixHeight = _g.matrixHeight, setsChartWidth = _g.setsChartWidth, leftPadding = _g.leftPadding;
    var matrixXScale = (0, react_1.useMemo)(function () {
        var domain = intersections.map(function (_, i) { return String(i); });
        return (0, d3_scale_1.scaleBand)([0, intersectionsChartWidth]).domain(domain).paddingInner(0.2);
    }, [intersections, intersectionsChartWidth]);
    var matrixYScale = (0, react_1.useMemo)(function () {
        var domain = sets.map(function (set) { return set.name; });
        return (0, d3_scale_1.scaleBand)([0, matrixHeight]).domain(domain);
    }, [sets, matrixHeight]);
    (0, react_1.useEffect)(function () {
        var _a = containerRef.current || {}, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
        setAvailableSize([clientWidth || width, clientHeight || height]);
    }, [width, height]);
    return (react_1.default.createElement("div", { ref: containerRef, className: styles.wrapper },
        react_1.default.createElement(Tooltip_1.default, { title: tooltipTitle, followCursor: true },
            react_1.default.createElement("svg", { className: styles.svg, width: svgWidth, height: svgHeight },
                react_1.default.createElement(IntersectionsMatrix_1.IntersectionsMatrix, { xScale: matrixXScale, yScale: matrixYScale, intersections: intersections, sets: sets, transform: "translate(".concat(leftPadding, ",").concat(matrixY, ")"), hoveredIntersection: hoveredIntersection }),
                react_1.default.createElement(SetsChart_1.SetsChart, { yScale: matrixYScale, width: setsChartWidth, sets: sets, labels: labels, hoveredElements: hoveredElements, hoverAreaWidth: svgWidth, transform: "translate(".concat(constants_1.GAP_BEFORE_LEFT_BAR, ",").concat(matrixY, ")"), onSetHover: setHoveredSet }),
                react_1.default.createElement(IntersectionsChart_1.IntersectionsChart, { xScale: matrixXScale, width: intersectionsChartWidth, height: intersectionsChartHeight, intersections: intersections, highlightedElements: hoveredElements, transform: "translate(".concat(leftPadding, ",").concat(constants_1.TOP_GAP, ")"), matrixHeight: matrixHeight, onIntersectionHover: setHoveredIntersection })))));
};
exports.UpSetChart = UpSetChart;
