'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "ChartTable", {
    enumerable: true,
    get: function() {
        return ChartTable;
    }
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useChartTableStylesstyles = require("./useChartTableStyles.styles");
const _utilities = require("../../utilities/utilities");
const _imageexportutils = require("../../utilities/image-export-utils");
const _reacttheme = require("@fluentui/react-theme");
const _d3color = /*#__PURE__*/ _interop_require_wildcard._(require("d3-color"));
const _colors = require("../../utilities/colors");
function invertHexColor(hex) {
    const color = _d3color.color(hex);
    if (!color) {
        return _reacttheme.tokens.colorNeutralForeground1;
    }
    const rgb = color.rgb();
    return _d3color.rgb(255 - rgb.r, 255 - rgb.g, 255 - rgb.b).formatHex();
}
function getSafeBackgroundColor(chartContainer, foreground, background) {
    const fallbackFg = _reacttheme.tokens.colorNeutralForeground1;
    const fallbackBg = _reacttheme.tokens.colorNeutralBackground1;
    if (!chartContainer) {
        return fallbackBg;
    }
    const resolvedFg = (0, _utilities.resolveCSSVariables)(chartContainer, foreground || fallbackFg);
    const resolvedBg = (0, _utilities.resolveCSSVariables)(chartContainer, background || fallbackBg);
    const fg = _d3color.color(resolvedFg);
    const bg = _d3color.color(resolvedBg);
    if (!fg || !bg) {
        return resolvedBg;
    }
    const contrast = (0, _colors.getColorContrast)(fg.formatHex(), bg.formatHex());
    if (contrast >= 3) {
        return bg.formatHex();
    }
    const invertedBg = invertHexColor(bg.formatHex());
    const invertedContrast = (0, _colors.getColorContrast)(fg.formatHex(), invertedBg);
    return invertedContrast >= 3 ? invertedBg : fallbackBg;
}
const ChartTable = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
    const { headers, rows, width, height } = props;
    const _isRTL = (0, _utilities.useRtl)();
    const _rootElem = _react.useRef(null);
    const classes = (0, _useChartTableStylesstyles.useChartTableStyles)(props);
    _react.useImperativeHandle(props.componentRef, ()=>({
            chartContainer: _rootElem.current,
            toImage: (opts)=>{
                return (0, _imageexportutils.toImage)(_rootElem.current, undefined, _isRTL, opts);
            }
        }), []);
    if (!headers || headers.length === 0) {
        return /*#__PURE__*/ _react.createElement("div", null, "No data available");
    }
    const bgColorSet = new Set();
    headers.forEach((header)=>{
        var _header_style, _d3_color;
        const bg = header === null || header === void 0 ? void 0 : (_header_style = header.style) === null || _header_style === void 0 ? void 0 : _header_style.backgroundColor;
        const normalized = (_d3_color = _d3color.color(bg || '')) === null || _d3_color === void 0 ? void 0 : _d3_color.formatHex();
        if (normalized) {
            bgColorSet.add(normalized);
        }
    });
    let sharedBackgroundColor;
    let 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) {
        const candidateBg = bgColorSet.size === 1 ? Array.from(bgColorSet)[0] : Array.from(bgColorSet)[1];
        for (const header of headers){
            var _header_style;
            const fg = header === null || header === void 0 ? void 0 : (_header_style = header.style) === null || _header_style === void 0 ? void 0 : _header_style.color;
            if (fg && (0, _colors.getColorContrast)(fg, candidateBg) >= 3) {
                sharedBackgroundColor = candidateBg;
                useSharedBackground = true;
                break;
            }
        }
    }
    return /*#__PURE__*/ _react.createElement("div", {
        ref: (el)=>_rootElem.current = el,
        className: classes.root,
        style: {
            height: height ? `${height}px` : '650px',
            overflow: 'hidden'
        }
    }, /*#__PURE__*/ _react.createElement("svg", {
        width: width !== null && width !== void 0 ? width : '100%',
        height: height !== null && height !== void 0 ? height : '650px'
    }, /*#__PURE__*/ _react.createElement("foreignObject", {
        x: "0",
        y: "0",
        width: "100%",
        height: "100%"
    }, /*#__PURE__*/ _react.createElement("div", {
        style: {
            maxHeight: height ? `${height}px` : '650px',
            overflowY: 'auto',
            overflowX: 'auto'
        }
    }, /*#__PURE__*/ _react.createElement("table", {
        className: classes.table,
        style: {
            width: width ? `${width}px` : '100%'
        }
    }, /*#__PURE__*/ _react.createElement("thead", null, /*#__PURE__*/ _react.createElement("tr", null, headers.map((header, idx)=>{
        const style = {
            ...header === null || header === void 0 ? void 0 : header.style
        };
        const fg = style.color;
        const bg = style.backgroundColor;
        if (useSharedBackground) {
            style.backgroundColor = sharedBackgroundColor;
        } else if (fg || bg) {
            style.backgroundColor = getSafeBackgroundColor(_rootElem.current, fg, bg);
        }
        return /*#__PURE__*/ _react.createElement("th", {
            key: idx,
            className: classes.headerCell,
            style: style,
            tabIndex: 0
        }, header.value);
    }))), rows && rows.length > 0 && /*#__PURE__*/ _react.createElement("tbody", null, rows.map((row, rowIdx)=>/*#__PURE__*/ _react.createElement("tr", {
            key: rowIdx
        }, row.map((cell, colIdx)=>{
            const style = {
                ...cell === null || cell === void 0 ? void 0 : cell.style
            };
            const fg = style.color;
            const bg = style.backgroundColor;
            if (fg || bg) {
                style.backgroundColor = getSafeBackgroundColor(_rootElem.current, fg, bg);
            }
            return /*#__PURE__*/ _react.createElement("td", {
                key: colIdx,
                className: classes.bodyCell,
                style: style,
                tabIndex: 0
            }, cell.value);
        })))))))));
});
ChartTable.displayName = 'ChartTable';
