define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities", "../../utilities/image-export-utils", "d3-color", "../../utilities/colors"], function (require, exports, tslib_1, React, Utilities_1, image_export_utils_1, d3, colors_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.ChartTableBase = void 0;
    function invertHexColor(hex, theme) {
        var color = d3.color(hex);
        if (!color) {
            return theme.semanticColors.bodyText;
        }
        var rgb = color.rgb();
        return d3.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();
    }
    function getSafeBackgroundColor(theme, foreground, background) {
        var fallbackFg = theme.semanticColors.bodyText;
        var fallbackBg = theme.semanticColors.bodyBackground;
        var fg = d3.color(foreground || fallbackFg);
        var bg = d3.color(background || fallbackBg);
        if (!fg || !bg) {
            return fallbackBg;
        }
        var contrast = (0, colors_1.getColorContrast)(fg.formatHex(), bg.formatHex());
        if (contrast >= 3) {
            return bg.formatHex();
        }
        var invertedBg = invertHexColor(bg.formatHex(), theme);
        var invertedContrast = (0, colors_1.getColorContrast)(fg.formatHex(), invertedBg);
        return invertedContrast >= 3 ? invertedBg : fallbackBg;
    }
    var getClassNames = (0, Utilities_1.classNamesFunction)();
    var ChartTableBase = /** @class */ (function (_super) {
        tslib_1.__extends(ChartTableBase, _super);
        function ChartTableBase(props) {
            var _this = _super.call(this, props) || this;
            _this.toImage = function (opts) {
                return (0, image_export_utils_1.toImage)(_this._rootElem, undefined, _this._isRTL, opts);
            };
            (0, Utilities_1.initializeComponentRef)(_this);
            _this._isRTL = (0, Utilities_1.getRTL)(props.theme);
            return _this;
        }
        // eslint-disable-next-line @typescript-eslint/no-deprecated
        ChartTableBase.prototype.render = function () {
            var _this = this;
            var _a;
            var _b = this.props, headers = _b.headers, rows = _b.rows, width = _b.width, height = _b.height, styles = _b.styles, theme = _b.theme;
            var classNames = getClassNames(styles, {
                theme: theme,
            });
            if (!headers || headers.length === 0) {
                return React.createElement("div", null, "No data available");
            }
            var bgColorSet = new Set();
            headers.forEach(function (header) {
                var _a, _b;
                var bg = (_a = header === null || header === void 0 ? void 0 : header.style) === null || _a === void 0 ? void 0 : _a.backgroundColor;
                var normalized = (_b = d3.color(bg || '')) === null || _b === void 0 ? void 0 : _b.formatHex();
                if (normalized) {
                    bgColorSet.add(normalized);
                }
            });
            var sharedBackgroundColor;
            var useSharedBackground = false;
            /*
            If we have only one or two unique background colors, we can consider using a shared background color
            for the table headers. This is to ensure better contrast with the foreground text.
            For size 1, we will consider that as default color if it satisfies the contrast ratio.
            There could also be a scenario where backgroundcolor array is of size 2, for eg: ["dimsgray", "gray"],
            which will assign 1st column header bg color to dimsgray and rest to gray. so our logic of shared background
            color won't run here. So will consider for size 2 as well.
            For size greater than this, we will consider that user wants different colors and will let color contrast fail
            if any.
            */
            if (bgColorSet.size === 1 || bgColorSet.size === 2) {
                var candidateBg = bgColorSet.size === 1 ? Array.from(bgColorSet)[0] : Array.from(bgColorSet)[1];
                for (var _i = 0, headers_1 = headers; _i < headers_1.length; _i++) {
                    var header = headers_1[_i];
                    var fg = (_a = header === null || header === void 0 ? void 0 : header.style) === null || _a === void 0 ? void 0 : _a.color;
                    if (fg && (0, colors_1.getColorContrast)(fg, candidateBg) >= 3) {
                        sharedBackgroundColor = candidateBg;
                        useSharedBackground = true;
                        break;
                    }
                }
            }
            return (React.createElement("div", { ref: function (el) { return (_this._rootElem = el); }, className: classNames.root, style: { height: height ? "".concat(height, "px") : '650px', overflow: 'hidden' } },
                React.createElement("svg", { width: width !== null && width !== void 0 ? width : '100%', height: height !== null && height !== void 0 ? height : '650px', className: classNames.chart },
                    React.createElement("foreignObject", { x: "0", y: "0", width: "100%", height: "100%" },
                        React.createElement("div", { style: {
                                maxHeight: height ? "".concat(height, "px") : '650px',
                                overflowY: 'auto',
                                overflowX: 'auto',
                            } },
                            React.createElement("table", { className: classNames.table, style: {
                                    width: width ? "".concat(width, "px") : '100%',
                                } },
                                React.createElement("thead", null,
                                    React.createElement("tr", null, headers.map(function (header, idx) {
                                        var style = tslib_1.__assign({}, header === null || header === void 0 ? void 0 : header.style);
                                        var fg = style.color;
                                        var bg = style.backgroundColor;
                                        if (useSharedBackground) {
                                            style.backgroundColor = sharedBackgroundColor;
                                        }
                                        else if (fg || bg) {
                                            style.backgroundColor = getSafeBackgroundColor(theme, fg, bg);
                                        }
                                        return (React.createElement("th", { key: idx, className: classNames.headerCell, style: style }, header.value));
                                    }))),
                                rows && rows.length > 0 && (React.createElement("tbody", null, rows.map(function (row, rowIdx) { return (React.createElement("tr", { key: rowIdx }, row.map(function (cell, colIdx) {
                                    var style = tslib_1.__assign({}, cell === null || cell === void 0 ? void 0 : cell.style);
                                    var fg = style.color;
                                    var bg = style.backgroundColor;
                                    if (fg || bg) {
                                        style.backgroundColor = getSafeBackgroundColor(theme, fg, bg);
                                    }
                                    return (React.createElement("td", { key: colIdx, className: classNames.bodyCell, style: style }, cell.value));
                                }))); })))))))));
        };
        return ChartTableBase;
    }(React.Component));
    exports.ChartTableBase = ChartTableBase;
});
//# sourceMappingURL=ChartTable.base.js.map