import React from 'react';
import { Box, Chip, Avatar, useTheme, makeStyles, lighten } from '@material-ui/core';
import { Skeleton } from '@material-ui/lab';
import { PropTypes } from 'prop-types';
const useStyles = makeStyles((theme) => ({
    rootContainer: {
        alignItems: 'flex-end',
        gap: '6px',
        flexWrap: 'wrap',
        flexDirection: 'row-reverse'
    },
    skeleton: {
        borderRadius: '5px',
        minWidth: '323px'
    }
}));
export const AccountFlags = (props) => {
    const { isLoading, flagList } = props;
    const classes = useStyles(props);
    const theme = useTheme();
    const lightValue = 0.5;
    const SeverityRange = {
        success: {
            textColor: theme.palette.success.light,
            backgroundColor: lighten(theme.palette.success.light, lightValue),
        },
        warning: {
            textColor: theme.palette.warning.light,
            backgroundColor: lighten(theme.palette.warning.light, lightValue),
        },
        alert: {
            textColor: theme.palette.error.light,
            backgroundColor: lighten(theme.palette.error.light, lightValue),
        },
        info: {
            textColor: theme.palette.primary.light,
            backgroundColor: lighten(theme.palette.primary.light, lightValue),
        }
    };
    return (React.createElement("div", null, isLoading ? (React.createElement(Skeleton, { variant: "rect", width: "100%", height: "60px", className: classes.skeleton })) : (React.createElement(Box, { display: "flex", className: classes.rootContainer }, flagList &&
        flagList.length > 0 &&
        flagList.map((item, index) => {
            var _a, _b, _c;
            const { label = 'Default', severity = 'info', textColor, backgroundColor, customColorRange } = item;
            const colorRange = customColorRange !== null && customColorRange !== void 0 ? customColorRange : SeverityRange;
            const background = backgroundColor || ((_a = colorRange[severity]) === null || _a === void 0 ? void 0 : _a.backgroundColor);
            const selectedTextColor = textColor || ((_b = colorRange[severity]) === null || _b === void 0 ? void 0 : _b.textColor);
            return (React.createElement(Chip, { label: label, avatar: React.createElement(Avatar, { style: { backgroundColor: selectedTextColor } }, ((_c = label[0]) === null || _c === void 0 ? void 0 : _c.toUpperCase()) || 'F'), style: { backgroundColor: background } }));
        })))));
};
AccountFlags.propTypes = {
    /** @type {?bool} loading indicator */
    isLoading: PropTypes.bool,
    /**
     * @type {?array} list of flags to render, required array object structure e.g
     * [{
     *  label: 'Flag Name',
     *  severity: 'Warning',       -- Determine the color of the flag
     *  textColor: string,         -- optional text color, if it's not specified then it will use the severity object color'
     *  backgroundColor: string,   -- optional background color, if it's not specified then it will use the severity object color'
     * }]
     */
    flagList: PropTypes.array.isRequired,
    /**
     * @type {?object} optional object to specify custom or additional colors e.g
     * {
     *  success: {
     *    textColor: '#4CAF50',
     *    backgroundColor: 'rgba(76, 175, 80, 0.25)',
     *  },
     *  warning: {
     *    textColor: '#FFB547',
     *    backgroundColor: 'rgba(255, 152, 0, 0.25)',
     *  }
     * }
     */
    customColorRange: PropTypes.object
};
//# sourceMappingURL=StatusFlags.js.map