var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
import React, { useMemo } from 'react';
import i18n from 'ui-i18n';
import { BasicTable } from '../BasicTable';
import { HeadCellRenderer } from './components/HeadCellRenderer';
import { AttributeCellRenderer } from './components/AttributeCellRenderer';
import { NumberCellValueRenderer } from './components/NumberCellValueRenderer';
import { useStyles } from './styles';
export var TableWithBars = function (_a) {
    var width = _a.width, height = _a.height, data = _a.data, _b = _a.options, options = _b === void 0 ? {} : _b, basicTableRef = _a.basicTableRef, onItemClick = _a.onItemClick;
    var styles = useStyles({ width: width, height: height });
    var _c = options.headers, _d = _c === void 0 ? [] : _c, labelHeader = _d[0], valueHeader = _d[1], _e = options.showValues, showValues = _e === void 0 ? true : _e;
    var tableClasses = useMemo(function () { return ({ cellBorder: styles.cellBorder }); }, [styles]);
    var maxValue = useMemo(function () { return Math.max.apply(Math, data.map(function (item) { return item.value; })); }, [data]);
    var headData = useMemo(function () { return __spreadArray([
        {
            id: 'label',
            label: labelHeader || i18n.text('Attributes'),
            resizable: false,
            headCellRenderer: HeadCellRenderer,
            rowCellValueRenderer: AttributeCellRenderer,
            initialWidth: width * 0.4
        }
    ], (showValues
        ? [
            {
                id: 'value',
                label: valueHeader || i18n.text('No of Profiles'),
                resizable: false,
                headCellRenderer: HeadCellRenderer,
                rowCellValueRenderer: NumberCellValueRenderer,
                maxValue: maxValue,
                initialWidth: width * 0.6
            }
        ]
        : []), true); }, [maxValue, width, valueHeader, labelHeader, showValues]);
    var context = useMemo(function () { return ({
        onItemClick: onItemClick
    }); }, [onItemClick]);
    return (React.createElement("div", { className: styles.tableContainer },
        React.createElement(BasicTable, { columnsData: headData, rowsData: data, headRowHeight: 48, getRowCellHeight: null, classes: tableClasses, defaultColumnWidth: 100, defaultColumnMinWidth: 100, ref: basicTableRef, context: context })));
};
