import React from 'react';
import { makeStyles, Typography, Divider, Tooltip } from '@material-ui/core';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import { TimelineDateBar } from './TimelineDateBar';
import { LayoutUnit } from '../../../layout/LayoutUnit';
import { TimelineStatus } from './TimelineStatus';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        minHeight: 200,
        background: (props) => !props.hidebackground && 'whitesmoke'
    },
    dateBar: {
        width: 130
    },
    centerWrapper: {
        display: 'flex',
        justifyContent: 'center'
    }
}));
export const SummaryToken = (props) => {
    const { title, short, showMonth, amount, status, date, user, icon, months = [], className, month, balance } = props;
    const classes = useStyles(props);
    return (React.createElement("div", { className: clsx(classes.root, className) }, React.createElement("div", { style: {
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
            width: 130
        } }, React.createElement("div", { style: { marginRight: -8 }, className: classes.centerWrapper }, icon), React.createElement("div", { style: { height: 24, display: 'flex', justifyContent: 'center' } }, React.createElement(Divider, { orientation: "vertical" })), React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } }, React.createElement(LayoutUnit, { unit: "nudge" }), React.createElement("div", { style: { textAlign: 'center' } }, React.createElement(Tooltip, { title: title }, React.createElement(Typography, { variant: "subtitle2", style: {
            textOverflow: 'ellipsis',
            overflow: 'hidden',
            whiteSpace: 'nowrap'
        } }, title))), React.createElement(LayoutUnit, { unit: "nudge" }), amount && (React.createElement("div", { style: {
            textAlign: 'center'
        } }, React.createElement(Tooltip, { title: amount }, React.createElement(Typography, { style: {
            textOverflow: 'ellipsis',
            overflow: 'hidden',
            whiteSpace: 'nowrap'
        } }, amount)))), !amount && (React.createElement("div", { style: {
            display: 'flex',
            justifyContent: 'center'
        } }, React.createElement(TimelineStatus, { status: status }))), React.createElement("div", { style: { textAlign: 'center' } }, React.createElement(Typography, { variant: "caption" }, date), React.createElement("div", { style: {
            textOverflow: 'ellipsis',
            overflow: 'hidden',
            whiteSpace: 'nowrap'
        } }, React.createElement(Tooltip, { title: user }, React.createElement(Typography, { variant: "caption" }, user))), React.createElement("div", { style: {
            textOverflow: 'ellipsis',
            overflow: 'hidden',
            whiteSpace: 'nowrap'
        } }, React.createElement(Tooltip, { title: balance }, React.createElement(Typography, { variant: "caption" }, balance))))), React.createElement(LayoutUnit, { unit: "xxs" }), !short && (React.createElement("div", { className: classes.dateBar }, React.createElement(TimelineDateBar, { month: month, showMonth: showMonth, months: months }))))));
};
SummaryToken.propTypes = {
    title: PropTypes.string,
    short: PropTypes.bool,
    showMonth: PropTypes.bool,
    amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    status: PropTypes.string,
    date: PropTypes.string,
    user: PropTypes.string,
    icon: PropTypes.element,
    months: PropTypes.array,
    className: PropTypes.string,
    month: PropTypes.string,
    balance: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    hidebackground: PropTypes.bool
};
//# sourceMappingURL=SummaryToken.js.map