import React from 'react';
import { makeStyles, Typography, lighten } from '@material-ui/core';
import clsx from 'clsx';
import { CheckMarkIcon, AwayStatusIcon, AddToIcon, CircleStopSolidIcon } from '@fluentui/react-icons';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({
    root: {},
    wrapper: {
        borderRadius: 25,
        display: 'flex',
        //paddingLeft: theme.spacing(1),
        paddingRight: theme.spacing(1)
    },
    iconWrapper: {
        background: theme.palette.success.main,
        color: theme.palette.common.white,
        paddingLeft: theme.spacing(0.5),
        paddingRight: theme.spacing(0.5),
        paddingBottom: theme.spacing(0.25),
        borderRadius: 25,
        marginRight: theme.spacing(0.5)
    },
    active: {
        background: lighten(theme.palette.info.light, 0.7)
    },
    pending: {
        background: lighten(theme.palette.warning.light, 0.7)
    },
    posted: {
        background: lighten(theme.palette.success.light, 0.7)
    },
    complete: {
        background: lighten(theme.palette.success.light, 0.4)
    },
    pendingAvatar: {
        background: theme.palette.warning.main
    },
    activeAvatar: {
        background: theme.palette.info.main
    },
    postedAvatar: {
        background: lighten(theme.palette.success.light, 0.2)
    },
    completeAvatar: {
        background: theme.palette.success.main
    }
}), { name: 'TimelineStatus' });
export const TimelineStatus = (props) => {
    let type = '';
    const { status } = props;
    const classes = useStyles(props);
    const StatusWrapper = ({ children, className, status, icon }) => {
        return (React.createElement("div", { className: clsx(classes.wrapper, className) }, React.createElement("div", { className: clsx(classes.iconWrapper, status) }, icon), React.createElement("div", { style: { marginTop: -1 } }, React.createElement(Typography, { variant: "caption" }, " ", children, " "))));
    };
    switch (status) {
        case 1:
            type = (React.createElement(StatusWrapper, { icon: React.createElement(AddToIcon, null), className: classes.active, status: classes.activeAvatar }, "Activ"));
            break;
        case 2:
            type = (React.createElement(StatusWrapper, { icon: React.createElement(CircleStopSolidIcon, null), className: classes.posted, status: classes.postedAvatar }, "Poste"));
            break;
        case 3:
            type = (React.createElement(StatusWrapper, { status: classes.pendingAvatar, className: classes.pending, icon: React.createElement(AwayStatusIcon, null) }, "Pendin"));
            break;
        case 4:
            type = (React.createElement(StatusWrapper, { icon: React.createElement(CheckMarkIcon, null), className: classes.complete, status: classes.completeAvatar }, "Complet"));
            break;
        default:
            type = React.createElement("div", null, status);
    }
    return type;
};
TimelineStatus.propTypes = {
    status: PropTypes.number
};
//# sourceMappingURL=TimelineStatus.js.map