import { __extends } from "tslib";
import * as React from 'react';
import { classNamesFunction, getRTL, initializeComponentRef } from '@fluentui/react/lib/Utilities';
import { toImage } from '../../utilities/image-export-utils';
var getClassNames = classNamesFunction();
var ChartTableBase = /** @class */ (function (_super) {
    __extends(ChartTableBase, _super);
    function ChartTableBase(props) {
        var _this = _super.call(this, props) || this;
        _this.toImage = function (opts) {
            return toImage(_this._rootElem, undefined, _this._isRTL, opts);
        };
        initializeComponentRef(_this);
        _this._isRTL = 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, style: header === null || header === void 0 ? void 0 : header.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) { return (React.createElement("td", { key: colIdx, className: classNames.bodyCell, style: cell === null || cell === void 0 ? void 0 : cell.style }, cell.value)); }))); })))))))));
    };
    return ChartTableBase;
}(React.Component));
export { ChartTableBase };
//# sourceMappingURL=ChartTable.base.js.map