import React from 'react';
import { isNil, identity } from 'ramda';
import i18n from 'ui-i18n';
import { formatNumberAsMetric } from '@reltio/mdm-sdk';
import Typography from '@mui/material/Typography';
import CachedIcon from '@mui/icons-material/Cached';
import { SmallIconButton } from '../../../SmallIconButton';
import { ColorBar } from '../../../ColorBar';
import { useStyles } from './styles';
export var NumberCellValueRenderer = function (_a) {
    var value = _a.value, maxValue = _a.columnData.maxValue, _b = _a.rowValue, _c = _b.onLoadButtonClick, onLoadButtonClick = _c === void 0 ? identity : _c, isLoading = _b.isLoading;
    var styles = useStyles();
    var showLoadButton = value === -1;
    return (React.createElement("div", { className: styles.numberContainer }, showLoadButton ? (React.createElement(React.Fragment, null,
        React.createElement(SmallIconButton, { icon: CachedIcon, disabled: isLoading, onClick: onLoadButtonClick }),
        React.createElement(Typography, { className: styles.loadCaption, variant: "caption" }, isLoading ? i18n.text('Loading data') : i18n.text('Load data')))) : (React.createElement(React.Fragment, null,
        React.createElement(Typography, { className: styles.number }, formatNumberAsMetric(value, 9999)),
        !isNil(maxValue) && (React.createElement("div", { className: styles.colorBarContainer },
            React.createElement(ColorBar, { width: value, maxWidth: maxValue })))))));
};
