import React, { useState } from 'react';
import { makeStyles, Typography } from '@material-ui/core';
import PropTypes from 'prop-types';
import { Ellipse } from '../../../../UI/components/dataDisplay/Ellipse';
import { getEllipseColor } from '../../../../utilities/style/utils/styleUtils';
import clsx from 'clsx';
const useStyles = makeStyles((theme) => ({
    root: {
        margin: (props) => (props.compact ? theme.spacing(0.5) : theme.spacing(1)),
        display: 'flex',
        justifyContent: 'center'
    },
    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)
    },
    hover: {
        zIndex: 9,
        position: 'absolute',
        top: 0,
        left: 0
    }
}));
export const TimelineToken = (props) => {
    const { type = 'default', variant = 'outlined', color = 'default', size = 'large', icon, letter = 'A', IconEllipseProps, className, hoverContainer, isHover } = props;
    const classes = useStyles(props);
    const [hover, setHover] = useState(false);
    const hoverFunction = () => {
        setHover(true);
    };
    const tokenComponent = (React.createElement("div", { className: clsx(classes.root, className), onMouseEnter: hoverFunction, onMouseLeave: () => setHover(false) }, React.createElement(Ellipse, Object.assign({ variant: "filled", size: size, color: color }, IconEllipseProps), type === 'letter' ? (React.createElement(Typography, { variant: "body1", className: classes.letter }, letter.toUpperCase())) : (React.createElement("div", null, " ", icon, " "))), isHover && (React.createElement("div", { className: classes.hover, style: { display: hover ? 'inline' : 'none' } }, hoverContainer))));
    return tokenComponent;
};
TimelineToken.propTypes = {
    type: PropTypes.string,
    variant: PropTypes.string,
    color: PropTypes.string,
    size: PropTypes.string,
    iconType: PropTypes.string,
    icon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.object]),
    letter: PropTypes.string,
    IconEllipseProps: PropTypes.object,
    iconColorOverride: PropTypes.string,
    onClick: PropTypes.func,
    className: PropTypes.string,
    hoverContainer: PropTypes.element,
    isHover: PropTypes.bool
};
//# sourceMappingURL=TimelineToken.js.map