import React, { memo } from 'react';
import { ButtonBase, makeStyles } from '@material-ui/core';
import { Alert } from '@material-ui/lab';
import { SeverityTypeEnums } from '../../../../enums/unitySystemEnums';
/**
 * Styles for the AlertPill component
 */
const useStyles = makeStyles((theme) => {
    const endRadius = theme.spacing(3);
    return {
        root: {
            display: 'flex',
            flexDirection: 'row',
            // borderRadius: endRadius,
            overflow: 'hidden',
            flexGrow: 0,
            alignSelf: 'start'
        },
        alertRoot: {
            // mui alert class
            padding: theme.spacing(0, 1.5, 0, 1),
            borderRadius: 0,
            '&:first-of-type': {
                borderTopLeftRadius: endRadius,
                borderBottomLeftRadius: endRadius
            },
            '&:last-of-type': {
                borderTopRightRadius: endRadius,
                borderBottomRightRadius: endRadius
            }
        },
        alertIcon: {
            // mui alert icon class
            marginRight: theme.spacing(0.5)
        },
        buttonBase: {
            borderRadius: endRadius,
            overflow: 'hidden'
        },
        defaultSeverityAlert: {
            backgroundColor: theme.palette.grey[400]
        }
    };
});
/**
 * Memoized version of the Alert component
 *
 * @param {object} props - Component props
 * @param {number} props.count - The count to display in the Alert
 * @param {boolean} props.hide - Whether the Alert should be hidden
 * @param {string} props.severity - The severity of the Alert
 * @param {object} props.alertProps - Additional props to pass to the Alert component
 * @param {number} props.maxCount - Max count to show before displaying as "{maxCount}+"
 * @returns {JSX.Element | null} - The Alert component, or null if the count is falsy or hide is true
 */
const MemoizedAlert = memo((props) => {
    const { count, hide, severity, alertProps, maxCount, label } = props;
    const classes = useStyles(props);
    if (count && !hide) {
        let displayCount = count;
        if (maxCount && count > maxCount) {
            displayCount = `${maxCount}+`;
        }
        if (severity === SeverityTypeEnums.Default) {
            return (React.createElement(Alert, Object.assign({ severity: SeverityTypeEnums.Info }, alertProps, { className: classes.defaultSeverityAlert }), displayCount));
        }
        return (React.createElement(Alert, Object.assign({ severity: severity }, alertProps), label ? label : displayCount));
    }
    return null;
});
MemoizedAlert.displayName = 'MemoizedAlert';
/**
 * The AlertPill component displays a row of Alerts, each with a count and a severity level.
 * Alerts can be hidden by setting the corresponding hide prop to true.
 *
 * @param {object} props - Component props
 * @param {function} [props.handleClick] - The click event handler.
 * @param {number} props.maxCount - Max count to show before displaying as "{maxCount}+"
 * @param {number} props.errorCount - The count for the error Alert
 * @param {number} props.warningCount - The count for the warning Alert
 * @param {number} props.successCount - The count for the success Alert
 * @param {number} props.infoCount - The count for the info Alert
 * @param {number} props.defaultCount - The count for the default Alert
 * @param {string} props.errorLabel - The label for the error Alert
 * @param {string} props.warningLabel - The label for the warning Alert
 * @param {string} props.successLabel - The label for the success Alert
 * @param {string} props.infoLabel - The label for the info Alert
 * @param {string} props.defaultLabel - The label for the default Alert
 * @param {boolean} props.hideError - Whether the error Alert should be hidden
 * @param {boolean} props.hideWarning - Whether the warning Alert should be hidden
 * @param {boolean} props.hideSuccess - Whether the success Alert should be hidden
 * @param {boolean} props.hideInfo - Whether the info Alert should be hidden
 * @param {boolean} props.hideDefault - Whether the default Alert should be hidden
 * @param {string} props.variant - The variant of the Alert
 * @param {function} [props.handleClick] - The click event handler.
 * @param {number} props.maxCount - Max count to show before displaying as "{maxCount}+"
 * @returns {JSX.Element} - The AlertPill component
 */
export const AlertPill = (props) => {
    const { variant = 'filled', handleClick, maxCount, errorCount, warningCount, successCount, infoCount, defaultCount, errorLabel, warningLabel, successLabel, infoLabel, defaultLabel, hideError = false, hideWarning = false, hideSuccess = false, hideInfo = false, hideDefault = false } = props;
    const classes = useStyles(props);
    const variantMapping = {
        filled: 'filled',
        standard: 'hint',
        outlined: 'outlined',
        text: ''
    };
    const alertProps = {
        variant: variantMapping[variant],
        classes: {
            root: classes.alertRoot,
            icon: classes.alertIcon
        }
    };
    return (React.createElement("div", { className: classes.root }, React.createElement(ButtonBase, { onClick: handleClick, className: classes.buttonBase }, React.createElement(MemoizedAlert, { count: errorCount, hide: hideError, severity: SeverityTypeEnums.Error, alertProps: alertProps, maxCount: maxCount, label: errorLabel }), React.createElement(MemoizedAlert, { count: warningCount, hide: hideWarning, severity: SeverityTypeEnums.Warning, alertProps: alertProps, maxCount: maxCount, label: warningLabel }), React.createElement(MemoizedAlert, { count: successCount, hide: hideSuccess, severity: SeverityTypeEnums.Success, alertProps: alertProps, maxCount: maxCount, label: successLabel }), React.createElement(MemoizedAlert, { count: infoCount, hide: hideInfo, severity: SeverityTypeEnums.Info, alertProps: alertProps, maxCount: maxCount, label: infoLabel }), React.createElement(MemoizedAlert, { count: defaultCount, hide: hideDefault, severity: SeverityTypeEnums.Default, alertProps: alertProps, maxCount: maxCount, label: defaultLabel }))));
};
//# sourceMappingURL=AlertPill.js.map