"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChartTableBase = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("@fluentui/react/lib/Utilities");
var image_export_utils_1 = require("../../utilities/image-export-utils");
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;
    }
    ChartTableBase.prototype.render = function () {
        var _this = this;
        var _a = this.props, headers = _a.headers, rows = _a.rows, width = _a.width, height = _a.height, styles = _a.styles, theme = _a.theme;
        var classNames = getClassNames(styles, {
            theme: theme,
        });
        if (!headers || headers.length === 0) {
            return React.createElement("div", null, "No data available");
        }
        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' },
                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) { return (React.createElement("th", { key: idx, className: classNames.headerCell }, header)); }))),
                            rows && rows.length > 0 && (React.createElement("tbody", null, rows.map(function (row, rowIdx) { return (React.createElement("tr", { key: rowIdx }, row.map(function (cell, colIdx) { return (React.createElement("td", { key: colIdx, className: classNames.bodyCell }, cell)); }))); })))))))));
    };
    return ChartTableBase;
}(React.Component));
exports.ChartTableBase = ChartTableBase;
//# sourceMappingURL=ChartTable.base.js.map