import React, { useEffect, useMemo, useRef, useState } from 'react';
import { scaleBand } from 'd3-scale';
import Tooltip from '@mui/material/Tooltip';
import { SetsChart } from './components/SetsChart';
import { IntersectionsMatrix } from './components/IntersectionsMatrix';
import { IntersectionsChart } from './components/IntersectionsChart';
import { useUpSetChartSizes } from './useUpSetChartSizes';
import { GAP_BEFORE_LEFT_BAR, TOP_GAP } from './constants';
import { findIntersections } from './helpers';
import { useStyles } from './styles';
export var UpSetChart = function (_a) {
    var data = _a.data, width = _a.width, height = _a.height;
    var styles = useStyles({ width: width, height: height });
    var containerRef = useRef(null);
    var _b = useState(null), hoveredSet = _b[0], setHoveredSet = _b[1];
    var _c = useState(null), hoveredIntersection = _c[0], setHoveredIntersection = _c[1];
    var _d = useState([width, height]), _e = _d[0], availableWidth = _e[0], availableHeight = _e[1], setAvailableSize = _d[1];
    var _f = useMemo(function () { return 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 = 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 = useMemo(function () {
        var domain = intersections.map(function (_, i) { return String(i); });
        return scaleBand([0, intersectionsChartWidth]).domain(domain).paddingInner(0.2);
    }, [intersections, intersectionsChartWidth]);
    var matrixYScale = useMemo(function () {
        var domain = sets.map(function (set) { return set.name; });
        return scaleBand([0, matrixHeight]).domain(domain);
    }, [sets, matrixHeight]);
    useEffect(function () {
        var _a = containerRef.current || {}, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
        setAvailableSize([clientWidth || width, clientHeight || height]);
    }, [width, height]);
    return (React.createElement("div", { ref: containerRef, className: styles.wrapper },
        React.createElement(Tooltip, { title: tooltipTitle, followCursor: true },
            React.createElement("svg", { className: styles.svg, width: svgWidth, height: svgHeight },
                React.createElement(IntersectionsMatrix, { xScale: matrixXScale, yScale: matrixYScale, intersections: intersections, sets: sets, transform: "translate(".concat(leftPadding, ",").concat(matrixY, ")"), hoveredIntersection: hoveredIntersection }),
                React.createElement(SetsChart, { yScale: matrixYScale, width: setsChartWidth, sets: sets, labels: labels, hoveredElements: hoveredElements, hoverAreaWidth: svgWidth, transform: "translate(".concat(GAP_BEFORE_LEFT_BAR, ",").concat(matrixY, ")"), onSetHover: setHoveredSet }),
                React.createElement(IntersectionsChart, { xScale: matrixXScale, width: intersectionsChartWidth, height: intersectionsChartHeight, intersections: intersections, highlightedElements: hoveredElements, transform: "translate(".concat(leftPadding, ",").concat(TOP_GAP, ")"), matrixHeight: matrixHeight, onIntersectionHover: setHoveredIntersection })))));
};
