import React from 'react';
import { makeStyles, lighten } from '@material-ui/core';
import { getCategoryColor } from '../../../utilities/style/colorConverter';
import clsx from 'clsx';
import PropTypes from 'prop-types'; // import PropTypes
const useStyles = makeStyles((theme) => ({
    root: {},
    timelineWrapper: {
        background: lighten(theme.palette.secondary.main, 0.7),
        height: 40,
        borderRadius: 50
        //width: 800
        //position: 'absolute'
    },
    dot: {
        width: 30,
        height: 30,
        borderRadius: 50
    },
    colorOne: {
        background: lighten(theme.palette.success.main, 0.8)
    },
    colorTwo: {
        background: lighten(theme.palette.info.main, 0.8)
    },
    colorThree: {
        background: lighten(theme.palette.secondary.main, 0.9)
    },
    colorFour: {
        background: getCategoryColor('four')
    },
    colorFive: {
        background: getCategoryColor('five')
    },
    colorSix: {
        background: getCategoryColor('six')
    },
    colorSeven: {
        background: lighten(theme.palette.warning.main, 0.9)
    }
}), { name: 'Timeline' });
export const TimelineWrapper = ({ style, timeline }) => {
    const classes = useStyles();
    let type = '';
    switch (timeline) {
        case 1:
            type = (React.createElement("div", { className: clsx(classes.timelineWrapper, classes.colorOne), style: style }));
            break;
        case 2:
            type = (React.createElement("div", { className: clsx(classes.timelineWrapper, classes.colorTwo), style: style }));
            break;
        case 3:
            type = (React.createElement("div", { className: clsx(classes.timelineWrapper, classes.colorThree), style: style }));
            break;
        case 4:
            type = (React.createElement("div", { className: clsx(classes.timelineWrapper, classes.colorFour), style: style }));
            break;
        case 5:
            type = (React.createElement("div", { className: clsx(classes.timelineWrapper, classes.colorFive), style: style }));
            break;
        case 6:
            type = (React.createElement("div", { className: clsx(classes.timelineWrapper, classes.colorSix), style: style }));
            break;
        case 7:
            type = (React.createElement("div", { className: clsx(classes.timelineWrapper, classes.colorSeven), style: style }));
            break;
        default:
    }
    return type;
};
// Define propTypes
TimelineWrapper.propTypes = {
    style: PropTypes.object,
    timeline: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7]).isRequired
};
//# sourceMappingURL=TimelineWrapper.js.map