import React, { useMemo } from 'react';
import { makeStyles, useTheme, Typography, IconButton } from '@material-ui/core';
import PropTypes from 'prop-types';
import { Ellipse } from './Ellipse';
import { UnityFluentIcon } from '../../../utilities/iconLibrary/UnityFluentIcon';
import { getEllipseColor, getEllipseHintColor } from '../../../utilities/style/utils/styleUtils';
const useStyles = makeStyles((theme) => ({
    root: {
        margin: (props) => (props.compact ? theme.spacing(0.5) : theme.spacing(1))
    },
    letter: {
        fontSize: (props) => props.size === 'small' ? theme.spacing(2.25) : theme.spacing(2.5),
        color: (props) => getEllipseColor(theme, props.color)
    },
    buttonRoot: {
        margin: theme.spacing(1),
        width: (props) => props.size === 'small' ? theme.spacing(4) : theme.spacing(5),
        height: (props) => props.size === 'small' ? theme.spacing(4) : theme.spacing(5),
        background: (props) => props.variant === 'filled' ? getEllipseHintColor(theme, props.color) : '',
        border: (props) => (props.variant === 'outlined' ? `1px solid` : 'none'),
        borderColor: (props) => props.variant === 'outlined' ? getEllipseColor(theme, props.color) : ''
    }
}));
export const Token = (props) => {
    const { type = 'default', variant = 'outlined', color = 'default', size = 'large', iconType, icon, letter = 'A', IconEllipseProps, onClick } = props;
    const classes = useStyles(props);
    const theme = useTheme();
    const iconColor = useMemo(() => {
        return getEllipseColor(theme, color);
    }, [color, theme]);
    const tokenComponent = (React.createElement("div", { className: classes.root }, React.createElement(Ellipse, Object.assign({ variant: variant, size: size, color: color }, IconEllipseProps), type === 'letter' ? (React.createElement(Typography, { variant: "body1", className: classes.letter }, letter.toUpperCase())) : (React.createElement(UnityFluentIcon, { size: size === 'small' ? size : 'medium', color: iconColor, type: iconType, icon: icon, style: {
            color: iconColor
        } })))));
    if (type === 'action') {
        return (React.createElement(IconButton, { classes: {
                root: classes.buttonRoot
            }, onClick: onClick }, React.createElement(UnityFluentIcon, { size: size === 'small' ? size : 'medium', color: iconColor, type: iconType, icon: icon, style: {
                color: iconColor
            } })));
    }
    return tokenComponent;
};
Token.propTypes = {
    type: PropTypes.string,
    variant: PropTypes.string,
    color: PropTypes.string,
    size: PropTypes.string,
    iconType: PropTypes.string,
    icon: PropTypes.elementType,
    letter: PropTypes.string,
    onClick: PropTypes.func
};
//# sourceMappingURL=Token.js.map