import React from 'react';
import { makeStyles, Typography } from '@material-ui/core';
import NumberVisualization from '../../utils/NumberVisualization';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        flexDirection: 'row',
        marginTop: theme.spacing(3),
        marginLeft: theme.spacing(2),
        overflow: 'auto'
    },
    dot: {
        width: 10,
        height: 10,
        backgroundColor: 'white',
        borderRadius: theme.shape.borderRadius + 25,
        marginTop: theme.spacing(1)
    },
    timeLabels: {
        color: 'white'
    },
    indicator: {
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'flex-end',
        marginRight: theme.spacing(2),
        textAlign: 'center',
        alignItems: 'center'
    }
}));
const TimeDot = (props) => {
    const classes = useStyles();
    const { dot } = props;
    return (React.createElement("div", { className: classes.indicator }, React.createElement("div", { className: classes.dot }), React.createElement("div", { className: classes.timeLabels }, React.createElement(Typography, { variant: "overline" }, dot))));
};
const Visualization = (props) => {
    const classes = useStyles();
    const { value, label } = props;
    return (React.createElement("div", { className: classes.indicator }, React.createElement("div", null, React.createElement(NumberVisualization, { number: value })), React.createElement("div", null, React.createElement(TimeDot, { dot: label }))));
};
const categoriesToDisplay = (categories) => categories.map((item) => {
    return (React.createElement(Visualization, { key: item.label, value: item.value, label: item.label }));
});
const FluentTimeline = (props) => {
    const classes = useStyles();
    const { categories } = props;
    return React.createElement("div", { className: classes.root }, categoriesToDisplay(categories));
};
export default FluentTimeline;
//# sourceMappingURL=FluentTimeline.js.map