import React from 'react';
import { AmbientCard } from '../../../../../UI/surfaces/cards/AmbientCard';
import { Typography } from '../../../../../UI/dataDisplay/typography';
import { StatusChip } from '../../../../../UI/dataDisplay/status';
import { makeStyles } from '@material-ui/core';
import { Adornment } from '../../../../../UI';
import { getLocalizedDateTimeString } from '../../../../../UI/widgets/utils/dateUtils';
import { ContactIcon } from '@fluentui/react-icons';
const useStyles = makeStyles((theme) => ({
    titleContainer: {
        display: 'flex',
        gap: '8px',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    chipContainer: {
        display: 'flex',
        gap: theme.spacing(1),
        alignItems: 'center',
        marginTop: theme.spacing(1)
    },
    card: {
        width: '100%',
        cursor: 'pointer',
        '&:hover': {
            backgroundColor: 'rgba(0, 0, 0, 0.04)'
        },
        padding: '8px 12px',
        border: '1px solid rgba(0, 0, 0, 0.08)'
    },
    captionText: {
        color: theme.palette.text.hint
    }
}));
export const TransactionNote = (props) => {
    var _a, _b;
    const { onClick, note } = props;
    const classes = useStyles();
    return (React.createElement("div", null, React.createElement(AmbientCard, { fullWidth: true, adornment: "info", noAdornment: false, customAdornment: React.createElement(Adornment, { color: 'info' }), removeTopLayoutUnit: true, removePadding: true, lastChildBottomPadding: '0px', cardContentHeight: '100%' }, React.createElement("div", { className: classes.card, onClick: onClick }, React.createElement("div", { className: classes.titleContainer }, React.createElement(Typography, { variant: "h6" }, (_a = note === null || note === void 0 ? void 0 : note.subject) !== null && _a !== void 0 ? _a : 'Transaction Note'), React.createElement(Typography, { variant: "caption", className: classes.captionText }, getLocalizedDateTimeString(note === null || note === void 0 ? void 0 : note.createdOn))), React.createElement(Typography, { variant: "body1" }, (_b = note === null || note === void 0 ? void 0 : note.content) !== null && _b !== void 0 ? _b : 'This is a placeholder for the transaction note component.'), React.createElement("div", { className: classes.chipContainer }, React.createElement(StatusChip, { label: note === null || note === void 0 ? void 0 : note.userDisplayName, color: "default", variant: "outline", icon: React.createElement(ContactIcon, null) }))))));
};
//# sourceMappingURL=TransactionNote.js.map