import React from 'react';
import { Avatar, makeStyles, useTheme } from '@material-ui/core';
import { AlertSolidIcon, CheckMarkIcon, WarningSolidIcon } from '@fluentui/react-icons';
import { TimelineDot } from '@material-ui/lab';
import clsx from 'clsx';
const useStyles = makeStyles((theme) => ({
    avatar: {
        width: 35,
        height: 35,
        fontSize: 16
    },
    spacer: {
        marginTop: theme.spacing(1),
        marginBottom: theme.spacing(1)
    },
    alert: {
        color: theme.palette.error.dark
    },
    avatarWarning: {
        width: 25,
        height: 25,
        fontSize: 12,
        paddingLeft: 1,
        paddingBottom: 1
    }
}));
export const TimeEntryStates = (props) => {
    let eventState = '';
    const { type } = props;
    const classes = useStyles();
    const theme = useTheme();
    switch (type) {
        case 'alert':
            eventState = (React.createElement(AlertSolidIcon, { className: clsx(classes.spacer, classes.alert) }));
            break;
        case 'success':
            eventState = (React.createElement(Avatar, { className: classes.avatar, style: { backgroundColor: theme.palette.success.main } }, React.createElement(CheckMarkIcon, null)));
            break;
        case 'warning':
            eventState = (React.createElement(Avatar, { className: classes.avatarWarning, style: { backgroundColor: theme.palette.warning.main } }, React.createElement(WarningSolidIcon, null)));
            break;
        default:
            eventState = React.createElement(TimelineDot, { variant: "outlined" });
    }
    return eventState;
};
//# sourceMappingURL=TimeEntryStates.js.map