1import Box from '@mui/material/Box';
 2import Typography from '@mui/material/Typography';
 3import {
 4  NotificationEntity,
 5  useReadNotificationsMutation,
 6} from '../../generated/graphql';
 7import Stack from '@mui/material/Stack';
 8import Badge from '@mui/material/Badge';
 9import {useRouter} from 'next/navigation';
10import {useTranslation} from 'react-i18next';
11import {formatDate} from './formatDate';
12
13interface NotificationProps {
14  notification: NotificationEntity;
15  onClose: () => void;
16}
17
18const CardNotification: React.FC<NotificationProps> = ({
19  notification,
20  onClose,
21}: NotificationProps) => {
22  const router = useRouter();
23  const {t} = useTranslation();
24  const [readNotifications] = useReadNotificationsMutation();
25
26  const eventName = notification.attributes.event.data?.attributes?.name;
27
28  const handleClick = () => {
29    router.push(`/e/${notification.attributes.event.data.attributes.uuid}`);
30    readNotifications({
31      refetchQueries: ['UserNotifications'],
32      variables: {id: notification.id},
33    });
34    onClose();
35  };
36
37  const showBadge = !notification.attributes.read;
38  const notificationContentKey = `notification.type.${notification.attributes.type}.content`;
39  const notificationContent = t(notificationContentKey);
40
41  return (
42    <Box
43      padding={2}
44      bgcolor="white"
45      marginBottom={2}
46      onClick={handleClick}
47      sx={{cursor: 'pointer'}}
48      borderRadius={1}
49    >
50      <Box>
51        <Stack
52          paddingBottom={1}
53          direction="row"
54          display="flex"
55          justifyContent="space-between"
56          spacing={2}
57        >
58          <Box display="flex" alignItems="center" sx={{width: '168px'}}>
59            {showBadge && (
60              <Badge
61                sx={{pr: 2}}
62                color="error"
63                variant="dot"
64                anchorOrigin={{
65                  vertical: 'top',
66                  horizontal: 'left',
67                }}
68              />
69            )}
70            <Typography variant="subtitle1" noWrap>
71              {eventName}
72            </Typography>
73          </Box>
74
75          <Typography variant="overline" color="text.secondary">
76            {formatDate(notification.attributes.createdAt)}
77          </Typography>
78        </Stack>
79        <Typography>{notificationContent}</Typography>
80      </Box>
81    </Box>
82  );
83};
84
85export default CardNotification;