import { __assign, __extends, __spreadArray } from "tslib";
import * as React from 'react';
import { max as d3Max } from 'd3-array';
import { select as d3Select } from 'd3-selection';
import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand } from 'd3-scale';
import { classNamesFunction, getId, getRTL, initializeComponentRef } from '@fluentui/react/lib/Utilities';
import { DirectionalHint } from '@fluentui/react/lib/Callout';
import { Legends } from '../../components/Legends/Legends';
import { CartesianChart } from '../CommonComponents/CartesianChart';
import { FocusZoneDirection } from '@fluentui/react-focus';
import { ChartHoverCard, ChartTypes, getAccessibleDataObject, YAxisType, XAxisTypes, getTypeOfAxis, getNextColor, findHBCWANumericMinMaxOfY, createYAxisForHorizontalBarChartWithAxis, domainRangeOfNumericForHorizontalBarChartWithAxis, createStringYAxisForHorizontalBarChartWithAxis, getNextGradient, areArraysEqual, } from '../../utilities/index';
import { toImage } from '../../utilities/image-export-utils';
var getClassNames = classNamesFunction();
var HorizontalBarChartWithAxisBase = /** @class */ (function (_super) {
    __extends(HorizontalBarChartWithAxisBase, _super);
    function HorizontalBarChartWithAxisBase(props) {
        var _a, _b, _c, _d, _e;
        var _this = _super.call(this, props) || this;
        _this._isRtl = getRTL();
        _this.toImage = function (opts) {
            var _a, _b;
            return toImage((_a = _this._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, (_b = _this._legendsRef.current) === null || _b === void 0 ? void 0 : _b.toSVG, _this._isRtl, opts);
        };
        _this._getDomainNRangeValues = function (points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
            var domainNRangeValue;
            if (xAxisType === XAxisTypes.NumericAxis) {
                domainNRangeValue = domainRangeOfNumericForHorizontalBarChartWithAxis(points, margins, width, isRTL, shiftX);
            }
            else {
                domainNRangeValue = { dStartValue: 0, dEndValue: 0, rStartValue: 0, rEndValue: 0 };
            }
            return domainNRangeValue;
        };
        _this._getMargins = function (margins) {
            _this.margins = margins;
        };
        _this._renderContentForOnlyBars = function (point) {
            var _a, _b, _c;
            var _d = _this.props, _e = _d.useSingleColor, useSingleColor = _e === void 0 ? false : _e, _f = _d.enableGradient, enableGradient = _f === void 0 ? false : _f;
            var selectedPointIndex = 0;
            _this.props.data.forEach(function (yDataPoint, index) {
                if (yDataPoint.y === point.y) {
                    selectedPointIndex = index;
                }
            });
            var color;
            if (useSingleColor) {
                //if useSingle color , then check if user has given a palette or not
                // and pick the first color from that or else from our paltette.
                color = _this.props.colors ? _this._createColors()(1) : getNextColor(1, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
                if (enableGradient) {
                    color = getNextGradient(0, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted)[0];
                }
            }
            else {
                color = point.color
                    ? point.color
                    : _this.props.colors
                        ? _this._createColors()(point.x)
                        : getNextColor(selectedPointIndex, 0, (_c = _this.props.theme) === null || _c === void 0 ? void 0 : _c.isInverted);
            }
            return (React.createElement(React.Fragment, null,
                React.createElement(ChartHoverCard, { XValue: point.xAxisCalloutData || point.x.toString(), Legend: point.legend, YValue: point.yAxisCalloutData || point.y, color: color, culture: _this.props.culture })));
        };
        _this._renderCallout = function (props) {
            return props ? _this._renderContentForOnlyBars(props) : null;
        };
        _this._getCustomizedCallout = function () {
            return _this.props.onRenderCalloutPerDataPoint
                ? _this.props.onRenderCalloutPerDataPoint(_this.state.dataPointCalloutProps, _this._renderCallout)
                : null;
        };
        _this._getGraphData = function (xScale, yScale, containerHeight, containerWidth, xElement, yElement) {
            return (_this._bars =
                _this._yAxisType === YAxisType.NumericAxis
                    ? _this._createNumericBars(containerHeight, containerWidth, xElement, yElement)
                    : _this._createStringBars(containerHeight, containerWidth, xElement, yElement));
        };
        _this._refCallback = function (element, legendTitle) {
            _this._refArray.push({ index: legendTitle, refElement: element });
        };
        _this._getCalloutContentForBar = function (point) {
            var _a, _b, _c;
            var YValueHover = [];
            var _d = _this.props, _e = _d.useSingleColor, useSingleColor = _e === void 0 ? false : _e, _f = _d.enableGradient, enableGradient = _f === void 0 ? false : _f;
            var data = _this.props.data;
            var selectedPoint = data.filter(function (yDataPoint) { return yDataPoint.y === point.y; });
            var selectedPointIndex = 0;
            data.forEach(function (yDataPoint, index) {
                if (yDataPoint.y === point.y) {
                    selectedPointIndex = index;
                }
            });
            var color;
            if (useSingleColor) {
                //if useSingle color , then check if user has given a palette or not
                // and pick the first color from that or else from our paltette.
                color = _this.props.colors ? _this._createColors()(1) : getNextColor(1, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
                if (enableGradient) {
                    color = getNextGradient(0, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted)[0];
                }
            }
            else {
                color = selectedPoint[0].color
                    ? selectedPoint[0].color
                    : _this.props.colors
                        ? _this._createColors()(selectedPoint[0].x)
                        : getNextColor(selectedPointIndex, 0, (_c = _this.props.theme) === null || _c === void 0 ? void 0 : _c.isInverted);
            }
            // callout data for the bar
            YValueHover.push({
                legend: selectedPoint[0].legend,
                // For HBCWA x and y Values are swapped
                y: selectedPoint[0].x,
                color: color,
                data: selectedPoint[0].yAxisCalloutData,
                yAxisCalloutData: selectedPoint[0].yAxisCalloutData,
            });
            return { YValueHover: YValueHover, hoverXValue: point.yAxisCalloutData || point.y.toString() };
        };
        _this._onBarLeave = function () {
            /**/
        };
        _this._handleChartMouseLeave = function () {
            _this._calloutAnchorPoint = null;
            _this.setState({
                isCalloutVisible: false,
                activeXdataPoint: null,
                YValueHover: [],
                hoverXValue: '',
            });
        };
        _this._onBarFocus = function (point, refArrayIndexNumber, color) {
            if ((_this.state.isLegendSelected === false || _this._isLegendHighlighted(point.legend)) &&
                _this._calloutAnchorPoint !== point) {
                var _a = _this._getCalloutContentForBar(point), YValueHover_1 = _a.YValueHover, hoverXValue_1 = _a.hoverXValue;
                _this._refArray.forEach(function (obj, index) {
                    if (refArrayIndexNumber === index) {
                        _this.setState({
                            refSelected: obj.refElement,
                            isCalloutVisible: true,
                            selectedLegendTitle: point.legend,
                            dataForHoverCard: point.x,
                            color: _this.props.useSingleColor ? color : point.color,
                            xCalloutValue: point.yAxisCalloutData || point.y.toString(),
                            yCalloutValue: point.xAxisCalloutData || point.x.toString(),
                            dataPointCalloutProps: point,
                            activeXdataPoint: point.x,
                            YValueHover: YValueHover_1,
                            hoverXValue: hoverXValue_1,
                            callOutAccessibilityData: point.callOutAccessibilityData,
                        });
                    }
                });
            }
        };
        _this._getScales = function (containerHeight, containerWidth, isNumericScale) {
            if (isNumericScale) {
                var xMax = d3Max(_this._points, function (point) { return point.x; });
                var yMax = d3Max(_this._points, function (point) { return point.y; });
                var xBarScale = d3ScaleLinear()
                    .domain(_this._isRtl ? [xMax, 0] : [0, xMax])
                    .nice()
                    .range([_this.margins.left, containerWidth - _this.margins.right]);
                var yBarScale = d3ScaleLinear()
                    .domain([0, yMax])
                    .range([containerHeight - _this.margins.bottom, _this.margins.top]);
                return { xBarScale: xBarScale, yBarScale: yBarScale };
            }
            else {
                var xMax = d3Max(_this._points, function (point) { return point.x; });
                // please note these padding default values must be consistent in here
                // and CatrtesianChartBase w for more details refer example
                // http://using-d3js.com/04_07_ordinal_scales.html
                var yBarScale = d3ScaleBand()
                    .domain(_this._yAxisLabels)
                    .range([containerHeight - _this.margins.bottom - _this._barHeight / 2, _this.margins.top + _this._barHeight / 2])
                    .padding(_this.props.yAxisPadding || 0);
                var xBarScale = d3ScaleLinear()
                    .domain(_this._isRtl ? [xMax, 0] : [0, xMax])
                    .nice()
                    .range([_this.margins.left, containerWidth - _this.margins.right]);
                return { xBarScale: xBarScale, yBarScale: yBarScale };
            }
        };
        _this._closeCallout = function () {
            _this.setState({
                isCalloutVisible: false,
            });
        };
        _this._getLegendData = function (data, palette) {
            var useSingleColor = _this.props.useSingleColor;
            var actions = [];
            data.forEach(function (point, _index) {
                var _a, _b, _c, _d;
                var color = useSingleColor
                    ? _this.props.colors
                        ? _this._createColors()(1)
                        : getNextColor(1, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted)
                    : point.color;
                if (_this.props.enableGradient) {
                    color = ((_b = point.gradient) === null || _b === void 0 ? void 0 : _b[0]) || getNextGradient(_index, 0, (_c = _this.props.theme) === null || _c === void 0 ? void 0 : _c.isInverted)[0];
                    if (useSingleColor) {
                        color = getNextGradient(0, 0, (_d = _this.props.theme) === null || _d === void 0 ? void 0 : _d.isInverted)[0];
                    }
                }
                // mapping data to the format Legends component needs
                var legend = {
                    title: point.legend,
                    color: color,
                    hoverAction: function () {
                        _this._handleChartMouseLeave();
                        _this._onLegendHover(point.legend);
                    },
                    onMouseOutAction: function (isLegendSelected) {
                        _this._onLegendLeave(isLegendSelected);
                    },
                };
                actions.push(legend);
            });
            var legends = (React.createElement(Legends, __assign({ legends: actions, enabledWrapLines: _this.props.enabledLegendsWrapLines, overflowProps: _this.props.legendsOverflowProps, focusZonePropsInHoverCard: _this.props.focusZonePropsForLegendsInHoverCard, overflowText: _this.props.legendsOverflowText }, _this.props.legendProps, { onChange: _this._onLegendSelectionChange.bind(_this), ref: _this._legendsRef })));
            return legends;
        };
        _this._isLegendSelected = function () {
            return _this.state.isLegendSelected;
        };
        /**
         * This function checks if the given legend is highlighted or not.
         * A legend can be highlighted in 2 ways:
         * 1. selection: if the user clicks on it
         * 2. hovering: if there is no selected legend and the user hovers over it
         */
        _this._isLegendHighlighted = function (legend) {
            return _this._getHighlightedLegend().includes(legend);
        };
        _this._getAxisData = function (yAxisData) {
            if (yAxisData && yAxisData.yAxisDomainValues.length) {
                // For HBCWA x and y Values are swapped
                var domainValue = yAxisData.yAxisDomainValues;
                _this._xMax = Math.max(domainValue[domainValue.length - 1], _this.props.xMaxValue || 0);
            }
        };
        _this._getAriaLabel = function (point) {
            var _a;
            var xValue = point.xAxisCalloutData || point.x;
            var yValue = point.yAxisCalloutData || point.y;
            return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || "".concat(xValue, ". ") + "".concat(yValue, ".");
        };
        _this._getChartTitle = function () {
            var _a = _this.props, chartTitle = _a.chartTitle, data = _a.data;
            return (chartTitle ? "".concat(chartTitle, ". ") : '') + "Horizontal bar chart with ".concat((data === null || data === void 0 ? void 0 : data.length) || 0, " bars. ");
        };
        initializeComponentRef(_this);
        _this.state = {
            color: '',
            dataForHoverCard: 0,
            isCalloutVisible: false,
            isLegendSelected: (((_a = props.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegends) && props.legendProps.selectedLegends.length > 0) ||
                ((_b = props.legendProps) === null || _b === void 0 ? void 0 : _b.selectedLegend) !== undefined,
            isLegendHovered: false,
            refSelected: null,
            selectedLegendTitle: (_d = (_c = props.legendProps) === null || _c === void 0 ? void 0 : _c.selectedLegend) !== null && _d !== void 0 ? _d : '',
            xCalloutValue: '',
            yCalloutValue: '',
            activeXdataPoint: null,
            YValueHover: [],
            hoverXValue: '',
            selectedLegends: ((_e = props.legendProps) === null || _e === void 0 ? void 0 : _e.selectedLegends) || [],
        };
        _this._calloutId = getId('callout');
        _this._tooltipId = getId('HBCWATooltipID_');
        _this._refArray = [];
        _this._xAxisType =
            _this.props.data && _this.props.data.length > 0
                ? getTypeOfAxis(_this.props.data[0].x, true)
                : XAxisTypes.NumericAxis;
        _this._yAxisType =
            _this.props.data && _this.props.data.length > 0
                ? getTypeOfAxis(_this.props.data[0].y, false)
                : YAxisType.StringAxis;
        _this._cartesianChartRef = React.createRef();
        _this._legendsRef = React.createRef();
        return _this;
    }
    HorizontalBarChartWithAxisBase.prototype.componentDidUpdate = function (prevProps) {
        var _a, _b, _c;
        if (!areArraysEqual((_a = prevProps.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegends, (_b = this.props.legendProps) === null || _b === void 0 ? void 0 : _b.selectedLegends)) {
            this.setState({
                selectedLegends: ((_c = this.props.legendProps) === null || _c === void 0 ? void 0 : _c.selectedLegends) || [],
            });
        }
    };
    HorizontalBarChartWithAxisBase.prototype.render = function () {
        var _this = this;
        this._adjustProps();
        var reversedBars = __spreadArray([], this._points, true).reverse();
        this._yAxisLabels = reversedBars.map(function (point) { return point.y; });
        this._xMax = Math.max(d3Max(this._points, function (point) { return point.x; }), this.props.xMaxValue || 0);
        var legendBars = this._getLegendData(this._points, this.props.theme.palette);
        this._classNames = getClassNames(this.props.styles, {
            theme: this.props.theme,
            legendColor: this.state.color,
        });
        var calloutProps = __assign(__assign({ isCalloutVisible: this.state.isCalloutVisible, directionalHint: DirectionalHint.topAutoEdge, id: "toolTip".concat(this._calloutId), target: this.state.refSelected, isBeakVisible: false, gapSpace: 15, color: this.state.color, legend: this.state.selectedLegendTitle, XValue: this.state.xCalloutValue, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard, onDismiss: this._closeCallout, preventDismissOnLostFocus: true }, this.props.calloutProps), getAccessibleDataObject(this.state.callOutAccessibilityData));
        var tickParams = {
            tickValues: this.props.tickValues,
            tickFormat: this.props.tickFormat,
        };
        return (React.createElement(CartesianChart, __assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._points, chartType: ChartTypes.HorizontalBarChartWithAxis, xAxisType: this._xAxisType, yAxisType: this._yAxisType, stringDatasetForYAxisDomain: this._yAxisLabels, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, createYAxis: createYAxisForHorizontalBarChartWithAxis, getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: createStringYAxisForHorizontalBarChartWithAxis, getMinMaxOfYAxis: findHBCWANumericMinMaxOfY, barwidth: this._barHeight, focusZoneDirection: FocusZoneDirection.vertical, customizedCallout: this._getCustomizedCallout(), getmargins: this._getMargins, getGraphData: this._getGraphData, getAxisData: this._getAxisData, onChartMouseLeave: this._handleChartMouseLeave, ref: this._cartesianChartRef, 
            /* eslint-disable react/jsx-no-bind */
            children: function (props) {
                return (React.createElement(React.Fragment, null,
                    React.createElement("g", null, _this._bars)));
            } })));
    };
    Object.defineProperty(HorizontalBarChartWithAxisBase.prototype, "chartContainer", {
        get: function () {
            var _a;
            return ((_a = this._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer) || null;
        },
        enumerable: false,
        configurable: true
    });
    HorizontalBarChartWithAxisBase.prototype._adjustProps = function () {
        this._points = this.props.data || [];
        this._barHeight = this.props.barHeight || 32;
        var palette = this.props.theme.palette;
        this._colors = this.props.colors || [palette.blueLight, palette.blue, palette.blueMid, palette.blueDark];
    };
    HorizontalBarChartWithAxisBase.prototype._createColors = function () {
        var _this = this;
        var increment = this._colors.length <= 1 ? 1 : 1 / (this._colors.length - 1);
        var _a = this.props.useSingleColor, useSingleColor = _a === void 0 ? false : _a;
        if (useSingleColor) {
            return function (_p) {
                var _a = _this.props, theme = _a.theme, colors = _a.colors;
                return colors && colors.length > 0 ? colors[0] : theme.palette.blueLight;
            };
        }
        var domainValues = [];
        for (var i = 0; i < this._colors.length; i++) {
            domainValues.push(increment * i * this._xMax);
        }
        var colorScale = d3ScaleLinear().domain(domainValues).range(this._colors);
        return colorScale;
    };
    HorizontalBarChartWithAxisBase.prototype._onBarHover = function (point, color, mouseEvent) {
        mouseEvent.persist();
        var _a = this._getCalloutContentForBar(point), YValueHover = _a.YValueHover, hoverXValue = _a.hoverXValue;
        if ((this.state.isLegendSelected === false || this._isLegendHighlighted(point.legend)) &&
            this._calloutAnchorPoint !== point) {
            this._calloutAnchorPoint = point;
            this.setState({
                refSelected: mouseEvent,
                isCalloutVisible: true,
                dataForHoverCard: point.x,
                selectedLegendTitle: point.legend,
                color: this.props.useSingleColor || this.props.enableGradient ? color : point.color,
                // To display callout value, if no callout value given, taking given point.x value as a string.
                xCalloutValue: point.yAxisCalloutData || point.y.toString(),
                yCalloutValue: point.xAxisCalloutData || point.x.toString(),
                dataPointCalloutProps: point,
                activeXdataPoint: point.x,
                YValueHover: YValueHover,
                hoverXValue: hoverXValue,
                callOutAccessibilityData: point.callOutAccessibilityData,
            });
        }
    };
    HorizontalBarChartWithAxisBase.prototype._createNumericBars = function (containerHeight, containerWidth, xElement, yElement) {
        var _this = this;
        var _a = this.props.useSingleColor, useSingleColor = _a === void 0 ? false : _a;
        var _b = this._getScales(containerHeight, containerWidth, true), xBarScale = _b.xBarScale, yBarScale = _b.yBarScale;
        var sortedBars = __spreadArray([], this._points, true);
        sortedBars.sort(function (a, b) {
            var aValue = typeof a.y === 'number' ? a.y : parseFloat(a.y);
            var bValue = typeof b.y === 'number' ? b.y : parseFloat(b.y);
            return bValue - aValue;
        });
        var bars = sortedBars.map(function (point, index) {
            var _a, _b, _c, _d, _e, _f, _g, _h;
            var shouldHighlight = true;
            if (_this.state.isLegendHovered || _this.state.isLegendSelected) {
                shouldHighlight = _this._isLegendHighlighted(point.legend);
            }
            _this._classNames = getClassNames(_this.props.styles, {
                theme: _this.props.theme,
                legendColor: _this.state.color,
                shouldHighlight: shouldHighlight,
            });
            var barHeight = Math.max(yBarScale(point.y), 0);
            if (barHeight < 1) {
                return React.createElement(React.Fragment, { key: point.x }, " ");
            }
            var startColor;
            if (useSingleColor) {
                //if useSingle color , then check if user has given a palette or not
                // and pick the first color from that or else from our paltette.
                startColor = _this.props.colors ? _this._createColors()(1) : getNextColor(1, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
            }
            else {
                startColor = _this.props.colors
                    ? _this._createColors()(point.x)
                    : getNextColor(index, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted);
            }
            startColor = point.color && !useSingleColor ? point.color : startColor;
            var endColor = startColor;
            if (_this.props.enableGradient) {
                var pointIndex = Math.max(_this._points.findIndex(function (item) { return item === point; }), 0);
                startColor = ((_c = point.gradient) === null || _c === void 0 ? void 0 : _c[0]) || getNextGradient(pointIndex, 0, (_d = _this.props.theme) === null || _d === void 0 ? void 0 : _d.isInverted)[0];
                endColor = ((_e = point.gradient) === null || _e === void 0 ? void 0 : _e[1]) || getNextGradient(pointIndex, 0, (_f = _this.props.theme) === null || _f === void 0 ? void 0 : _f.isInverted)[1];
                if (useSingleColor) {
                    startColor = getNextGradient(0, 0, (_g = _this.props.theme) === null || _g === void 0 ? void 0 : _g.isInverted)[0];
                    endColor = getNextGradient(0, 0, (_h = _this.props.theme) === null || _h === void 0 ? void 0 : _h.isInverted)[1];
                }
                _this._points[pointIndex].color = startColor;
            }
            var gradientId = getId('HBCWA_Gradient') + "_".concat(index, "_").concat(point.x);
            return (React.createElement(React.Fragment, { key: "".concat(index, "_").concat(point.x) },
                _this.props.enableGradient && (React.createElement("defs", null,
                    React.createElement("linearGradient", { id: gradientId },
                        React.createElement("stop", { offset: "0", stopColor: startColor }),
                        React.createElement("stop", { offset: "100%", stopColor: endColor })))),
                React.createElement("rect", { key: point.y, x: _this._isRtl ? xBarScale(point.x) : _this.margins.left, className: _this._classNames.opacityChangeOnHover, y: yBarScale(point.y) - _this._barHeight / 2, "data-is-focusable": shouldHighlight, width: _this._isRtl
                        ? containerWidth - _this.margins.right - Math.max(xBarScale(point.x), 0)
                        : Math.max(xBarScale(point.x), 0) - _this.margins.left, height: _this._barHeight, ref: function (e) {
                        _this._refCallback(e, point.legend);
                    }, rx: _this.props.roundCorners ? 3 : 0, onClick: point.onClick, onMouseOver: _this._onBarHover.bind(_this, point, startColor), "aria-label": _this._getAriaLabel(point), role: "img", "aria-labelledby": "toolTip".concat(_this._calloutId), onMouseLeave: _this._onBarLeave, onFocus: _this._onBarFocus.bind(_this, point, index, startColor), onBlur: _this._onBarLeave, fill: _this.props.enableGradient ? "url(#".concat(gradientId, ")") : startColor })));
        });
        return bars;
    };
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    HorizontalBarChartWithAxisBase.prototype._tooltipOfYAxislabels = function (ytooltipProps) {
        var _this = this;
        var tooltipCls = ytooltipProps.tooltipCls, yAxis = ytooltipProps.yAxis, id = ytooltipProps.id;
        if (yAxis === null) {
            return null;
        }
        var div = d3Select('body').append('div').attr('id', id).attr('class', tooltipCls).style('opacity', 0);
        var aa = yAxis.selectAll('#BaseSpan')._groups[0];
        var baseSpanLength = aa && Object.keys(aa).length;
        var originalDataArray = [];
        for (var i = 0; i < baseSpanLength; i++) {
            var originalData = aa[i].dataset && Object.values(aa[i].dataset)[0];
            originalDataArray.push(originalData);
        }
        var tickObject = yAxis.selectAll('.tick')._groups[0];
        var tickObjectLength = tickObject && Object.keys(tickObject).length;
        var _loop_1 = function (i) {
            var d1 = tickObject[i];
            d3Select(d1)
                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                .on('mouseover', function (event, d) {
                if (!_this.state.tooltipElement) {
                    div.style('opacity', 0.9);
                    div
                        .text(originalDataArray[i])
                        .style('left', event.pageX + 'px')
                        .style('top', event.pageY - 28 + 'px');
                }
            })
                .on('mouseout', function (d) {
                div.style('opacity', 0);
            });
        };
        for (var i = 0; i < tickObjectLength; i++) {
            _loop_1(i);
        }
    };
    HorizontalBarChartWithAxisBase.prototype._createStringBars = function (containerHeight, containerWidth, xElement, yElement) {
        var _this = this;
        var _a = this._getScales(containerHeight, containerWidth, false), xBarScale = _a.xBarScale, yBarScale = _a.yBarScale;
        var _b = this.props.useSingleColor, useSingleColor = _b === void 0 ? false : _b;
        var bars = this._points.map(function (point, index) {
            var _a, _b, _c, _d, _e, _f, _g, _h;
            var shouldHighlight = true;
            if (_this.state.isLegendHovered || _this.state.isLegendSelected) {
                shouldHighlight = _this._isLegendHighlighted(point.legend);
            }
            _this._classNames = getClassNames(_this.props.styles, {
                theme: _this.props.theme,
                legendColor: _this.state.color,
                shouldHighlight: shouldHighlight,
            });
            var barHeight = Math.max(yBarScale(point.y), 0);
            if (barHeight < 1) {
                return React.createElement(React.Fragment, { key: point.x }, " ");
            }
            var startColor;
            if (useSingleColor) {
                //if useSingle color , then check if user has given a palette or not
                // and pick the first color from that or else from our paltette.
                startColor = _this.props.colors ? _this._createColors()(1) : getNextColor(1, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
            }
            else {
                startColor = _this.props.colors
                    ? _this._createColors()(point.x)
                    : getNextColor(index, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted);
            }
            startColor = point.color && !useSingleColor ? point.color : startColor;
            var endColor = startColor;
            if (_this.props.enableGradient) {
                var pointIndex = _this._points.findIndex(function (item) { return item === point; });
                startColor = ((_c = point.gradient) === null || _c === void 0 ? void 0 : _c[0]) || getNextGradient(pointIndex, 0, (_d = _this.props.theme) === null || _d === void 0 ? void 0 : _d.isInverted)[0];
                endColor = ((_e = point.gradient) === null || _e === void 0 ? void 0 : _e[1]) || getNextGradient(pointIndex, 0, (_f = _this.props.theme) === null || _f === void 0 ? void 0 : _f.isInverted)[1];
                if (useSingleColor) {
                    startColor = getNextGradient(0, 0, (_g = _this.props.theme) === null || _g === void 0 ? void 0 : _g.isInverted)[0];
                    endColor = getNextGradient(0, 0, (_h = _this.props.theme) === null || _h === void 0 ? void 0 : _h.isInverted)[1];
                }
                _this._points[pointIndex].color = startColor;
            }
            var gradientId = getId('HBCWA_Gradient') + "_".concat(index, "_").concat(point.x);
            return (React.createElement(React.Fragment, { key: "".concat(index, "_").concat(point.x) },
                _this.props.enableGradient && (React.createElement("defs", null,
                    React.createElement("linearGradient", { id: gradientId },
                        React.createElement("stop", { offset: "0", stopColor: startColor }),
                        React.createElement("stop", { offset: "100%", stopColor: endColor })))),
                React.createElement("rect", { transform: "translate(0,".concat(0.5 * (yBarScale.bandwidth() - _this._barHeight), ")"), key: point.x, className: _this._classNames.opacityChangeOnHover, x: _this._isRtl ? xBarScale(point.x) : _this.margins.left, y: yBarScale(point.y), rx: _this.props.roundCorners ? 3 : 0, width: _this._isRtl
                        ? containerWidth - _this.margins.right - Math.max(xBarScale(point.x), 0)
                        : Math.max(xBarScale(point.x), 0) - _this.margins.left, height: _this._barHeight, "aria-labelledby": "toolTip".concat(_this._calloutId), "aria-label": _this._getAriaLabel(point), role: "img", ref: function (e) {
                        _this._refCallback(e, point.legend);
                    }, onClick: point.onClick, onMouseOver: _this._onBarHover.bind(_this, point, startColor), onMouseLeave: _this._onBarLeave, onBlur: _this._onBarLeave, "data-is-focusable": shouldHighlight, onFocus: _this._onBarFocus.bind(_this, point, index, startColor), fill: _this.props.enableGradient ? "url(#".concat(gradientId, ")") : startColor })));
        });
        // Removing un wanted tooltip div from DOM, when prop not provided, for proper cleanup
        // of unwanted DOM elements, to prevent flacky behaviour in tooltips , that might occur
        // in creating tooltips when tooltips are enabled( as we try to recreate a tspan with this._tooltipId)
        if (!this.props.showYAxisLablesTooltip) {
            try {
                document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
                //eslint-disable-next-line no-empty
            }
            catch (e) { }
        }
        // Used to display tooltip at y axis labels.
        if (this.props.showYAxisLablesTooltip) {
            var yAxisElement = d3Select(yElement).call(yBarScale);
            if (!this.state.tooltipElement) {
                try {
                    document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
                    //eslint-disable-next-line no-empty
                }
                catch (e) { }
            }
            var ytooltipProps = {
                tooltipCls: this._classNames.tooltip,
                id: this._tooltipId,
                yAxis: yAxisElement,
            };
            yAxisElement && this._tooltipOfYAxislabels(ytooltipProps);
        }
        return bars;
    };
    HorizontalBarChartWithAxisBase.prototype._onLegendHover = function (customMessage) {
        if (!this._isLegendSelected()) {
            this.setState({
                isLegendHovered: true,
                selectedLegendTitle: customMessage,
            });
        }
    };
    HorizontalBarChartWithAxisBase.prototype._onLegendLeave = function (isLegendFocused) {
        if (!!isLegendFocused || !this._isLegendSelected()) {
            this.setState({
                isLegendHovered: false,
                selectedLegendTitle: '',
                isLegendSelected: isLegendFocused ? false : this._isLegendSelected(),
            });
        }
    };
    HorizontalBarChartWithAxisBase.prototype._getHighlightedLegend = function () {
        return this.state.selectedLegends.length > 0
            ? this.state.selectedLegends
            : this.state.selectedLegendTitle
                ? [this.state.selectedLegendTitle]
                : [];
    };
    HorizontalBarChartWithAxisBase.prototype._onLegendSelectionChange = function (selectedLegends, event, currentLegend) {
        var _a, _b;
        if ((_a = this.props.legendProps) === null || _a === void 0 ? void 0 : _a.canSelectMultipleLegends) {
            this.setState({
                selectedLegends: selectedLegends,
                selectedLegendTitle: currentLegend === null || currentLegend === void 0 ? void 0 : currentLegend.title,
            });
        }
        else {
            this.setState({
                selectedLegends: selectedLegends.slice(-1),
                selectedLegendTitle: currentLegend === null || currentLegend === void 0 ? void 0 : currentLegend.title,
            });
        }
        this.setState({
            isLegendSelected: selectedLegends.length > 0,
        });
        if ((_b = this.props.legendProps) === null || _b === void 0 ? void 0 : _b.onChange) {
            this.props.legendProps.onChange(selectedLegends, event, currentLegend);
        }
    };
    return HorizontalBarChartWithAxisBase;
}(React.Component));
export { HorizontalBarChartWithAxisBase };
//# sourceMappingURL=HorizontalBarChartWithAxis.base.js.map