import React from 'react';
import { TimelineItem, TimelineOppositeContent, TimelineSeparator, TimelineConnector, TimelineContent } from '@material-ui/lab';
import { Typography, makeStyles } from '@material-ui/core';
import { TimeEntryStates } from './TimeEntryStates';
import { FluentIconButton } from '../inputs/buttons/FluentIconButton';
import { CalculatorSubtractIcon, CalculatorAdditionIcon } from '@fluentui/react-icons';
const useStyles = makeStyles((theme) => ({
    root: {},
    extended: {
        maxWidth: 300
    },
    extendedButton: {
        marginTop: theme.spacing(-1),
        marginLeft: theme.spacing(1)
    }
}));
const TimelineElement = (props) => {
    const { time, entry, type, demoGraph, extend, extendOne, title, biasLeft } = props;
    const classes = useStyles();
    return (React.createElement(TimelineItem, null, React.createElement(TimelineOppositeContent, null, React.createElement(Typography, { className: classes.time, color: "textSecondary" }, time)), React.createElement(TimelineSeparator, null, React.createElement(TimeEntryStates, { type: type }), React.createElement(TimelineConnector, null)), React.createElement(TimelineContent, { style: { flex: biasLeft ? 2 : 1 } }, React.createElement(Typography, { variant: "subtitle2" }, " ", title, " "), React.createElement("div", { style: {
            display: 'flex',
            justifyContent: 'flex-start',
            marginTop: 8
        } }, React.createElement(Typography, null, " ", entry, " "), demoGraph && (React.createElement(FluentIconButton, { className: classes.extendedButton, onClick: extend, color: "primary", icon: extendOne ? CalculatorSubtractIcon : CalculatorAdditionIcon }))), demoGraph)));
};
export default TimelineElement;
//# sourceMappingURL=TimelineElement.js.map