import React from 'react';
import classnames from 'classnames';
import { propEq, toUpper, slice, pipe, defaultTo, find, propOr, startsWith, ifElse } from 'ramda';
import Typography from '@mui/material/Typography';
import Tooltip from '@mui/material/Tooltip';
import { useMdmDataTenants } from '../contexts/MdmModuleContext';
import { useStyles } from './styles';
var addDataTenantPrefix = function (label) { return "DT:".concat(slice(0, 1, label)); };
export var DataTenantBadge = function (_a) {
    var dataTenantId = _a.dataTenantId, className = _a.className;
    var styles = useStyles({ dataTenantId: dataTenantId });
    var dataTenants = useMdmDataTenants();
    var dataTenant = pipe(defaultTo([]), find(propEq('id', dataTenantId)))(dataTenants);
    var label = pipe(propOr('', 'label'), toUpper, ifElse(startsWith('DT:'), slice(0, 4), addDataTenantPrefix))(dataTenant);
    var content = (React.createElement("div", { className: classnames(styles.root, className) },
        React.createElement(Typography, { variant: "body2" }, label)));
    var showTooltip = !!(dataTenant === null || dataTenant === void 0 ? void 0 : dataTenant.label);
    if (!showTooltip) {
        return content;
    }
    return (React.createElement(Tooltip, { "data-reltio-id": "reltio-data-tenant-bage-tooltip", title: dataTenant.label }, content));
};
