import React, { useMemo, useRef } from 'react';
import i18n from 'ui-i18n';
import { useStyles } from './styles';
import { calculateTicksWidth } from '../../helpers';
export var IntersectionsChartAxis = function (_a) {
    var xScale = _a.xScale, yScale = _a.yScale, width = _a.width, height = _a.height;
    var styles = useStyles();
    var ticksRef = useRef(null);
    var ticks = useMemo(function () {
        return yScale
            .nice()
            .ticks()
            .filter(function (tick) { return Number.isInteger(tick); });
    }, [yScale]);
    var ticksWidth = useMemo(function () { return calculateTicksWidth(ticks); }, [ticks]);
    return (React.createElement("g", null,
        xScale.domain().map(function (d, i) {
            var x = xScale(d) + xScale.bandwidth() / 2;
            return React.createElement("line", { key: "v-grid-".concat(i), className: styles.verticalGrid, x1: x, x2: x, y1: 0, y2: height });
        }),
        ticks.map(function (tick, i) {
            var y = yScale(tick);
            return React.createElement("line", { key: "h-grid-".concat(i), className: styles.horizontalGrid, x1: 0, x2: width, y1: y, y2: y });
        }),
        React.createElement("g", { ref: ticksRef }, ticks.map(function (tick, i) {
            var y = yScale(tick);
            return (React.createElement("g", { key: "x-tick-".concat(i), transform: "translate(0,".concat(y, ")") },
                React.createElement("line", { className: styles.axis, x1: -4, x2: 0, y1: 0, y2: 0 }),
                React.createElement("text", { className: styles.axisTickLabel, x: -8, y: 4 }, tick)));
        })),
        React.createElement("line", { className: styles.axis, x1: 0, x2: 0, y1: 0, y2: height }),
        React.createElement("line", { className: styles.axis, x1: 0, x2: width, y1: height, y2: height }),
        React.createElement("text", { className: styles.axisLabel, transform: "translate(".concat(-ticksWidth - 12, ",").concat(height / 2, ") rotate(-90)") }, i18n.text('No. of unified profiles'))));
};
