import React, { useMemo } from 'react';
import { scaleLinear } from 'd3-scale';
import { SetsChartAxis } from '../SetsChartAxis';
import { GAP_BEFORE_LEFT_BAR, SET_BAR_HEIGHT, TEXT_GAP } from '../../constants';
import { useStyles } from './styles';
export var SetsChart = function (_a) {
    var sets = _a.sets, width = _a.width, yScale = _a.yScale, transform = _a.transform, labels = _a.labels, hoveredElements = _a.hoveredElements, hoverAreaWidth = _a.hoverAreaWidth, onSetHover = _a.onSetHover;
    var styles = useStyles();
    var containerRef = React.useRef(null);
    var xScale = useMemo(function () {
        var maxSetSize = sets.length > 0 ? Math.max.apply(Math, sets.map(function (set) { return set.size; })) : 0;
        return scaleLinear().domain([0, maxSetSize]).range([0, width]);
    }, [width, sets]);
    return (React.createElement("g", { ref: containerRef, transform: transform },
        React.createElement(SetsChartAxis, { width: width }),
        sets.map(function (set, i) {
            var name = set.name, size = set.size, elements = set.elements;
            var label = labels[i];
            var height = yScale.bandwidth();
            var y = yScale(name) + height / 2 - SET_BAR_HEIGHT / 2;
            var lineY = yScale(name) + height;
            var barSize = hoveredElements ? elements.filter(function (el) { return hoveredElements.includes(el); }).length : size;
            return (React.createElement("g", { key: "set-group-".concat(i) },
                React.createElement("rect", { className: styles.setsBarBackground, x: 0, y: y, width: width, height: SET_BAR_HEIGHT }),
                React.createElement("rect", { className: styles.setsBarDimmed, x: width - xScale(size), y: y, width: xScale(size), height: SET_BAR_HEIGHT }),
                React.createElement("rect", { className: styles.setsBar, x: width - xScale(barSize), y: y, width: xScale(barSize), height: SET_BAR_HEIGHT }),
                i !== sets.length - 1 && (React.createElement("line", { className: styles.gridLine, x1: 0, x2: hoverAreaWidth, y1: lineY, y2: lineY })),
                React.createElement("text", { className: styles.setsLabel, x: width + TEXT_GAP, y: yScale(name) + height / 2 }, label),
                React.createElement("rect", { className: styles.hoverBar, "data-reltio-id": "set-hover-area", x: -GAP_BEFORE_LEFT_BAR + 1, y: yScale(name), width: hoverAreaWidth - 2, height: height, onMouseEnter: function () { return onSetHover(set); }, onMouseLeave: function () { return onSetHover(null); } })));
        })));
};
