import React, { useState } from 'react';
import { makeStyles, Fade, Card, CardContent } from '@material-ui/core';
import Timeline from '@material-ui/lab/Timeline';
import TimelineElement from './TimelineElement';
import TimeAgo from 'timeago-react';
import ExtendActions from './ExtendActions';
// import { timelineData } from '../../test/MockTimelineData';
const useStyles = makeStyles((theme) => ({
    root: {
        position: 'relative'
    },
    extended: {
        display: 'none'
    },
    paper: {
        position: 'absolute',
        bottom: -38,
        left: -16,
        width: '100%',
        height: 0,
        // transition: 'height 1s ',
        transition: theme.transitions.create('height', {
            easing: theme.transitions.easing.easeOut,
            duration: theme.transitions.duration.standard
        })
    },
    expanded: {
        height: 500
    },
    extendedButton: {
        display: 'flex',
        justifyContent: 'flex-end'
    },
    actions: {
        display: 'flex',
        justifyContent: 'center',
        marginBottom: theme.spacing(3)
    },
    biasLeft: {
        display: 'flex',
        width: '100%'
    }
}));
export const TimeLine = ({ timelineData, semantic, biasLeft }) => {
    const [initial, setInitial] = useState(6);
    const [extendOne, setExtendOne] = useState(false);
    const classes = useStyles();
    const extend = () => {
        setExtendOne(!extendOne);
    };
    const extendActions = (React.createElement(ExtendActions, { more: () => setInitial(initial + 6), less: () => setInitial(initial - 6), showMore: initial < timelineData.length, showLess: initial >= 6 }));
    return (React.createElement(Timeline
    // align="alternate"
    , { 
        // align="alternate"
        className: classes.root }, timelineData &&
        timelineData.map((item, index) => {
            if (index <= initial) {
                console.log(item);
                return (React.createElement(TimelineElement, { biasLeft: biasLeft, key: index, time: semantic ? React.createElement(TimeAgo, { datetime: item.time }) : item.time, entry: item.event, type: item.type, title: item.title, extendOne: extendOne, extend: extend, demoGraph: item.extendedData && (React.createElement(Fade, { in: extendOne }, React.createElement(Card, { style: { backgroundColor: 'white' }, elevation: 0, className: !extendOne && classes.extended }, React.createElement(CardContent, null, React.createElement("div", { className: classes.extendedButton }, item.moreInfo && item.moreInfo))))) }));
            }
        }), biasLeft && (React.createElement("div", { className: classes.biasLeft }, React.createElement("div", { style: { flex: 1 } }), React.createElement("div", { style: { flex: 2, marginLeft: -22 } }, extendActions))), !biasLeft && React.createElement("div", { className: classes.actions }, extendActions)));
};
export default TimeLine;
//# sourceMappingURL=TimeLine.js.map