import React from 'react';
// @ts-ignore
import { makeStyles } from '@material-ui/core';
import { useTenant } from '../../utilities/tenant/useTenant';
import { Typography } from '../../UI/dataDisplay/typography/Typography';
import { APP_RIBBON_SPACE, useBuildEnvironment } from './useBuildEnvironment';
const useStyles = makeStyles({
    root: {
        width: '100vw',
        height: APP_RIBBON_SPACE,
        backgroundColor: ({ environment }) => `var(--env-ribbon-${environment})`,
        color: '#ffffff', // Default white text
        display: 'flex',
        alignItems: 'center',
        position: 'relative',
        // Use CSS to handle staging text color
        '&.staging': {
            color: '#000000'
        }
    },
    centerText: {
        position: 'absolute',
        left: '50%',
        transform: 'translateX(-50%)',
        fontWeight: 600
    },
    rightText: {
        position: 'absolute',
        right: '10px',
        fontWeight: 500
    }
});
export const EnvironmentRibbon = () => {
    var _a;
    const tenantInfo = useTenant();
    const buildEnvironment = useBuildEnvironment();
    const classes = useStyles({ environment: buildEnvironment });
    if (!buildEnvironment)
        return null;
    return (React.createElement("div", { className: `${classes.root} ${buildEnvironment === 'staging' ? 'staging' : ''}`, id: "udp-environment-banner" }, React.createElement(Typography, { className: classes.centerText }, (buildEnvironment === null || buildEnvironment === void 0 ? void 0 : buildEnvironment.charAt(0).toUpperCase()) + (buildEnvironment === null || buildEnvironment === void 0 ? void 0 : buildEnvironment.slice(1)) || ''), React.createElement(Typography, { className: classes.rightText }, (_a = tenantInfo === null || tenantInfo === void 0 ? void 0 : tenantInfo.activeTenant) === null || _a === void 0 ? void 0 : _a.tenantName)));
};
//# sourceMappingURL=EnvironmentRibbon.js.map