import React from 'react';
import { makeStyles, lighten, useTheme, Typography, Divider } from '@material-ui/core';
import { TimelineToken } from './modified/TimelineToken';
import { CustomListIcon, AlarmClockIcon, SendIcon, SpeedHighIcon, BankIcon, MoneyIcon, MessageIcon, DietPlanNotebookIcon } from '@fluentui/react-icons';
import { colors } from '../../../utilities/style/colors';
import { TimelineHoverCard } from './TimelineHoverCard';
import { TimelineDot } from './TimelineDot';
import { TimelineStatus } from './TimelineStatus';
import { LayoutUnit } from '../../../layout/LayoutUnit';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({
    root: {
        height: 200
    },
    timelineWrapper: {
        background: lighten(theme.palette.secondary.main, 0.7),
        height: 40,
        borderRadius: 50,
        position: (props) => (props.relative ? 'relative' : 'absolute')
    },
    token: {
        position: (props) => (props.relative ? 'relative' : 'absolute'),
        top: (props) => props.top - 9,
        left: (props) => props.left - 2,
        transition: '1s',
        cursor: 'pointer',
        '&:hover': {}
    },
    // summaryRoot: {
    //   display: 'flex',
    //   flexDirection: 'column',
    //   alignItems: 'center',
    //   color: 'grey',
    // },
    summaryRoot: {},
    negativeMargin: {
        marginTop: -6
    },
    titleContainer: {
        textOverflow: 'ellipsis',
        //background: lighten(theme.palette.common.black, 0.9),
        overflow: 'hidden',
        //color: theme.palette.common.white,
        borderRadius: 4,
        paddingLeft: 4,
        paddingRight: 2
    }
}), { name: 'TimelineTokenSummary' });
export const TimelineTokenSummary = (props) => {
    const { timelineItem, onClick, isHover, title, showLabel = true, dot, color, date, message, amount, user, status, summary, iconColor, showToken, details = true, icon } = props;
    const classes = useStyles(props);
    let type = '';
    const theme = useTheme();
    const TimelineSummary = ({ message }) => {
        return (React.createElement("div", null, React.createElement("div", { style: {
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center'
            } }, summary && (React.createElement("div", { style: { height: 24 } }, React.createElement(Divider, { orientation: "vertical" }))), React.createElement("div", { className: classes.summaryRoot, style: { display: 'flex' } }, React.createElement("div", { className: classes.titleContainer, style: { height: summary && 90 } }, React.createElement(Typography, { variant: "caption", style: {
                fontWeight: 700,
                textOverflow: 'ellipsis',
                overflow: 'hidden'
            } }, title), details && (React.createElement("div", null, React.createElement(LayoutUnit, { unit: "nudge" }), React.createElement(Typography, null, amount), React.createElement(TimelineStatus, { status: status }), React.createElement("div", null, React.createElement(Typography, { variant: "caption" }, message), React.createElement("div", null, React.createElement(Typography, { variant: "caption" }, user))))))))));
    };
    const NodeItem = ({ dot, icon }) => {
        var _a, _b;
        return (React.createElement("div", { className: classes.token, onClick: onClick }, (dot || showToken) && (React.createElement(TimelineToken, { color: (_b = (_a = colors.unity) === null || _a === void 0 ? void 0 : _a.info) === null || _b === void 0 ? void 0 : _b.hint, icon: icon, size: "small", 
            // iconColorOverride={theme.palette.info.light}
            iconColorOverride: iconColor, onClick: onClick, action: true, isHover: isHover, hoverContainer: React.createElement(TimelineHoverCard, { date: date, categoryColor: theme.palette.info.main, message: message, timelineItem: timelineItem }) }, ' ')), !dot && !summary && (React.createElement(TimelineDot, { title: title, date: date, color: color, hoverContent: React.createElement(TimelineHoverCard, { date: date, categoryColor: theme.palette.info.main, message: message, timelineItem: timelineItem }) })), showLabel && !dot && React.createElement(TimelineSummary, { message: message })));
    };
    switch (timelineItem) {
        case 'Email':
            type = React.createElement(NodeItem, { icon: SendIcon, dot: dot });
            break;
        case 'ServiceOrder':
            type = React.createElement(NodeItem, { icon: CustomListIcon, dot: dot });
            break;
        case 'SMS':
            type = React.createElement(NodeItem, { icon: MessageIcon, dot: dot });
            break;
        case 'Web Payment':
            type = React.createElement(NodeItem, { icon: BankIcon, dot: dot });
            break;
        case 'Deposit - Regular':
            type = React.createElement(NodeItem, { icon: AlarmClockIcon, dot: dot });
            break;
        case 'Start Read':
            type = React.createElement(NodeItem, { icon: SpeedHighIcon, dot: dot });
            break;
        case 'Regular Bill':
            type = React.createElement(NodeItem, { icon: DietPlanNotebookIcon, dot: dot });
            break;
        case 'Email Notify':
            type = React.createElement(NodeItem, { icon: MoneyIcon, dot: dot });
            break;
        case 'Payment':
            type = React.createElement(NodeItem, { icon: MoneyIcon, dot: dot });
            break;
        case 'Bill':
            type = React.createElement(NodeItem, { icon: MoneyIcon, dot: dot });
            break;
        case 'Service Order':
            type = React.createElement(NodeItem, { icon: MoneyIcon, dot: dot });
            break;
        case 'Late':
            type = React.createElement(NodeItem, { icon: MoneyIcon, dot: dot });
            break;
        case 'Letter':
            type = React.createElement(NodeItem, { icon: MoneyIcon, dot: dot });
            break;
        case 'Disc':
            type = React.createElement(NodeItem, { icon: MoneyIcon, dot: dot });
            break;
        default:
    }
    return React.createElement(NodeItem, { icon: icon ? icon : MoneyIcon, dot: dot });
};
TimelineTokenSummary.propTypes = {
    timelineItem: PropTypes.string.isRequired,
    onClick: PropTypes.func,
    isHover: PropTypes.bool,
    title: PropTypes.string,
    showLabel: PropTypes.bool,
    dot: PropTypes.bool,
    color: PropTypes.string,
    date: PropTypes.string,
    message: PropTypes.string,
    amount: PropTypes.string,
    user: PropTypes.string,
    status: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    summary: PropTypes.bool,
    iconColor: PropTypes.string,
    showToken: PropTypes.bool,
    details: PropTypes.bool,
    icon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.object])
};
//# sourceMappingURL=TimelineTokenSummary.js.map