import React, { useState } from 'react';
import { Typography, makeStyles, Popover, MenuItem } from '@material-ui/core';
import { FluentIconButton } from '../../inputs/buttons/FluentIconButton';
import { MoreVerticalIcon } from '@fluentui/react-icons';
import { FluentIcon } from '../../../utilities/iconLibrary/FluentIcon';
const useStyles = makeStyles(theme => ({
    flexCol: {
        flexGrow: 1,
        fontSize: '0.875rem',
        marginLeft: theme.spacing(1),
    },
    customTimelineContent: {
        display: 'flex',
        borderLeft: '1px solid ' + theme.palette.grey[300],
        paddingLeft: theme.spacing(3),
        paddingTop: theme.spacing(0.5),
        paddingBottom: theme.spacing(0.5),
        marginLeft: theme.spacing(2.5),
        alignItems: 'center',
    },
    customTimelineContentDate: {
        marginLeft: theme.spacing(3),
        marginRight: theme.spacing(2),
        minWidth: theme.spacing(5),
        fontWeight: 400,
        textAlign: 'right',
        fontSize: '12px',
    },
    customTimelineDot: {
        marginLeft: theme.spacing(-3.55),
        width: theme.spacing(1),
        height: theme.spacing(1),
        backgroundColor: theme.palette.grey[400],
        borderRadius: '100%',
    },
    flexDescription: {
        fontSize: '0.875rem',
    },
}));
export const FluentTimelineContent = props => {
    const { data, title, description, date, actions, category } = props;
    const classes = useStyles();
    const [openMenu, setOpenMenu] = useState(false);
    const [anchorEl, setAnchorEl] = useState(null);
    const handlePopoverClick = event => {
        setOpenMenu(true);
        setAnchorEl(event.currentTarget);
    };
    const handlePopoverClose = event => {
        setOpenMenu(false);
        setAnchorEl(null);
    };
    return (React.createElement("div", { className: classes.customTimelineContent }, React.createElement("div", { className: classes.customTimelineDot }), React.createElement(Typography, { variant: "body2", noWrap: true, className: classes.flexCol }, title), React.createElement(Typography, { variant: "body2", noWrap: true, className: classes.flexDescription }, description), React.createElement(Typography, { variant: "caption", color: "textSecondary", className: classes.customTimelineContentDate }, date), (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && (React.createElement(FluentIconButton, { icon: MoreVerticalIcon, size: "small", onClick: handlePopoverClick, id: 'udpRecord-FluentTimelineContent-MoreAction-' +
            category +
            '-' +
            typeof title === 'string' && title.replace(/\s+/g, ''), udprecordid: 'udpRecord-FluentTimelineContent-MoreAction-' +
            category +
            '-' +
            typeof title === 'string' && title.replace(/\s+/g, '') })), React.createElement(Popover, { id: "fluentTimelineContentPopover", open: openMenu, anchorEl: anchorEl, onClose: handlePopoverClose, anchorOrigin: {
            vertical: 'bottom',
            horizontal: 'right'
        }, transformOrigin: {
            vertical: 'top',
            horizontal: 'right'
        } }, actions === null || actions === void 0 ? void 0 : actions.map((action) => {
        var _a, _b;
        return (React.createElement(MenuItem, { id: 'udpRecord-FluentTimelineContent-MenuItem-' +
                ((_a = action === null || action === void 0 ? void 0 : action.label) === null || _a === void 0 ? void 0 : _a.replace(/ /g, '-')), udprecordid: 'udpRecord-FluentTimelineContent-MenuItem-' +
                ((_b = action === null || action === void 0 ? void 0 : action.label) === null || _b === void 0 ? void 0 : _b.replace(/ /g, '-')), onClick: () => {
                if (action.onClick) {
                    action.onClick(data);
                }
            }, style: {
                display: 'flex',
                justifyContent: 'space-between'
            } }, React.createElement(Typography, null, action === null || action === void 0 ? void 0 : action.label), (action === null || action === void 0 ? void 0 : action.icon) && (React.createElement(FluentIcon, { component: action === null || action === void 0 ? void 0 : action.icon, style: { marginLeft: 7 } }))));
    }))));
};
//# sourceMappingURL=FluentTimelineContent.js.map