import React, { useState } from 'react';
import { makeStyles, Typography } from '@material-ui/core';
import clsx from 'clsx';
import { TimelineHoverCard } from './TimelineHoverCard';
import { TimelineStatus } from './TimelineStatus';
import PropTypes from 'prop-types'; // import PropTypes
const useStyles = makeStyles((theme) => ({
    root: {
        cursor: 'pointer'
    },
    wrapper: {
        width: 130,
        marginBottom: theme.spacing(2)
    }
}));
export const MultiDot = (props) => {
    const { map, number } = props;
    const classes = useStyles(props);
    const { className } = props;
    const [hover, setHover] = useState(false);
    return (React.createElement("div", { className: clsx(classes.root, className), onMouseDownCapture: () => setHover(!hover) }, React.createElement("div", { style: {
            paddingLeft: 16,
            paddingRight: 16,
            paddingTop: 10,
            paddingBottom: 10,
            background: '#918296',
            borderRadius: 50,
            color: 'white'
        } }, React.createElement(Typography, { variant: "subtitle2" }, " ", number, " ")), hover && (React.createElement(TimelineHoverCard, null, map.map((item) => {
        return (React.createElement("div", { className: classes.wrapper }, React.createElement(Typography, { variant: "subtitle2" }, item.details.shortDescription), React.createElement(Typography, { variant: "caption" }, " ", item.details.date, " "), React.createElement(TimelineStatus, { status: item.details.status })));
    })))));
};
// Define propTypes
MultiDot.propTypes = {
    map: PropTypes.arrayOf(PropTypes.shape({
        details: PropTypes.shape({
            shortDescription: PropTypes.string.isRequired,
            date: PropTypes.string.isRequired,
            status: PropTypes.string.isRequired
        }).isRequired
    })).isRequired,
    number: PropTypes.number.isRequired,
    className: PropTypes.string
};
//# sourceMappingURL=MultiDot.js.map