import React, { useState } from 'react';
import { makeStyles, useTheme } from '@material-ui/core';
import { TimelineHoverCard } from './TimelineHoverCard';
import clsx from 'clsx';
import PropTypes from 'prop-types'; // import PropTypes
const useStyles = makeStyles((theme) => ({
    root: {
        minHeight: theme.spacing(1.25),
        minWidth: theme.spacing(1.25),
        borderRadius: 25,
        cursor: (props) => props.hover && 'pointer'
    },
    multi: {
        padding: 11,
        paddingTop: 5,
        paddingBottom: 5,
        color: theme.palette.common.white
    }
}));
export const VisualizationDot = (props) => {
    const theme = useTheme();
    const classes = useStyles(props);
    const { type, children, hover, multi, noHover } = props;
    const [showHover, setShowHover] = useState();
    const DotWrapper = ({ color }) => {
        return (React.createElement("div", { onMouseEnter: () => setShowHover(true), onMouseLeave: () => setShowHover(false), className: clsx(classes.root, multi && classes.multi), style: { background: color } }, children, showHover && !noHover && (React.createElement(TimelineHoverCard, { popover: false }, " ", hover, " "))));
    };
    let dot = theme.palette.primary.main;
    switch (type) {
        case 'Late Bill':
            dot = React.createElement(DotWrapper, { color: theme.palette.warning.light });
            break;
        case 'Disconnect':
            dot = React.createElement(DotWrapper, { color: theme.palette.error.main });
            break;
        case 'Letter Sent':
            dot = React.createElement(DotWrapper, { color: theme.palette.warning.dark });
            break;
        case 'Payment':
            dot = React.createElement(DotWrapper, { color: theme.palette.success.main });
            break;
        case 'Arrange Pay':
            dot = React.createElement(DotWrapper, { color: theme.palette.warning.main });
            break;
        default:
            dot = React.createElement(DotWrapper, { color: theme.palette.info.light });
            break;
    }
    return dot;
};
// Define propTypes
VisualizationDot.propTypes = {
    type: PropTypes.string,
    children: PropTypes.node,
    hover: PropTypes.node,
    multi: PropTypes.bool,
    noHover: PropTypes.bool
};
//# sourceMappingURL=VisualizationDot.js.map