import React, { useState } from 'react';
import { makeStyles, Typography, Fade, Divider } from '@material-ui/core';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        alignContent: 'flex-end',
        cursor: 'pointer',
        justifyContent: 'center'
    },
    wrapper: {
        display: 'flex'
    },
    countWrapper: {
        background: '#E9DADB',
        borderRadius: 25,
        padding: 8
    }
}));
export const DateWrapper = ({ children, date, months, count }) => {
    const classes = useStyles();
    const [show, setShow] = useState(true);
    const threadHeight = 165;
    const MONTHS = {
        1: 'Jan',
        2: 'Feb',
        3: 'March',
        4: 'Apr',
        5: 'May',
        6: 'June',
        7: 'July',
        8: 'Aug',
        9: 'Sept',
        10: 'Oct',
        11: 'Nov',
        12: 'Dec'
    };
    // Convert months to order
    const orderedMonths = [months];
    orderedMonths.sort(function (a, b) {
        return a - b;
    });
    // Map to named months
    const output = orderedMonths.map(function (i) {
        return MONTHS[i];
    });
    return (React.createElement("div", { onClick: () => setShow(!show) }, React.createElement(Fade, { in: show }, React.createElement("div", null, show && React.createElement("div", { className: classes.wrapper }, children, " "))), React.createElement("div", { className: classes.root }, React.createElement("div", null, !show && (React.createElement("div", { style: {
            height: threadHeight,
            display: 'flex',
            justifyContent: 'center'
        } }, React.createElement("div", null, React.createElement("div", { className: classes.countWrapper }, React.createElement(Typography, { variant: "subtitle2" }, " + "), count), React.createElement("div", { style: {
            height: 123,
            display: 'flex',
            justifyContent: 'center'
        } }, React.createElement(Divider, { orientation: "vertical" }))))), React.createElement("div", { style: { padding: 4 } }, React.createElement(Typography, { variant: "caption" }, output, " "))))));
};
DateWrapper.propTypes = {
    children: PropTypes.node,
    date: PropTypes.string,
    months: PropTypes.number,
    count: PropTypes.number
};
//# sourceMappingURL=DateWrapper.js.map