import PropTypes from 'prop-types';
import { set, sub } from 'date-fns';
import { noCase } from 'change-case';
import { faker } from '@faker-js/faker';
import { useState } from 'react';
// @mui
import {
Box,
List,
Badge,
Button,
Avatar,
Tooltip,
Divider,
Popover,
Typography,
IconButton,
ListItemText,
ListSubheader,
ListItemAvatar,
ListItemButton,
} from '@mui/material';
// utils
import { fToNow } from '../../../utils/formatTime';
// components
import Iconify from '../../../components/iconify';
import Scrollbar from '../../../components/scrollbar';
// ----------------------------------------------------------------------
const NOTIFICATIONS = [
{
id: faker.datatype.uuid(),
title: 'Your order is placed',
description: 'waiting for shipping',
avatar: null,
type: 'order_placed',
createdAt: set(new Date(), { hours: 10, minutes: 30 }),
isUnRead: true,
},
{
id: faker.datatype.uuid(),
title: faker.name.fullName(),
description: 'answered to your comment on the Minimal',
avatar: './assets/images/avatars/avatar_2.jpg',
type: 'friend_interactive',
createdAt: sub(new Date(), { hours: 3, minutes: 30 }),
isUnRead: true,
},
{
id: faker.datatype.uuid(),
title: 'You have new message',
description: '5 unread messages',
avatar: null,
type: 'chat_message',
createdAt: sub(new Date(), { days: 1, hours: 3, minutes: 30 }),
isUnRead: false,
},
{
id: faker.datatype.uuid(),
title: 'You have new mail',
description: 'sent from Guido Padberg',
avatar: null,
type: 'mail',
createdAt: sub(new Date(), { days: 2, hours: 3, minutes: 30 }),
isUnRead: false,
},
{
id: faker.datatype.uuid(),
title: 'Delivery processing',
description: 'Your order is being shipped',
avatar: null,
type: 'order_shipped',
createdAt: sub(new Date(), { days: 3, hours: 3, minutes: 30 }),
isUnRead: false,
},
];
export default function NotificationsPopover() {
const [notifications, setNotifications] = useState(NOTIFICATIONS);
const totalUnRead = notifications.filter((item) => item.isUnRead === true).length;
const [open, setOpen] = useState(null);
const handleOpen = (event) => {
setOpen(event.currentTarget);
};
const handleClose = () => {
setOpen(null);
};
const handleMarkAllAsRead = () => {
setNotifications(
notifications.map((notification) => ({
...notification,
isUnRead: false,
}))
);
};
return (
<>
Notifications
You have {totalUnRead} unread messages
{totalUnRead > 0 && (
)}
New
}
>
{notifications.slice(0, 2).map((notification) => (
))}
Before that
}
>
{notifications.slice(2, 5).map((notification) => (
))}
>
);
}
// ----------------------------------------------------------------------
NotificationItem.propTypes = {
notification: PropTypes.shape({
createdAt: PropTypes.instanceOf(Date),
id: PropTypes.string,
isUnRead: PropTypes.bool,
title: PropTypes.string,
description: PropTypes.string,
type: PropTypes.string,
avatar: PropTypes.any,
}),
};
function NotificationItem({ notification }) {
const { avatar, title } = renderContent(notification);
return (
{avatar}
{fToNow(notification.createdAt)}
}
/>
);
}
// ----------------------------------------------------------------------
function renderContent(notification) {
const title = (
{notification.title}
{noCase(notification.description)}
);
if (notification.type === 'order_placed') {
return {
avatar:
,
title,
};
}
if (notification.type === 'order_shipped') {
return {
avatar:
,
title,
};
}
if (notification.type === 'mail') {
return {
avatar:
,
title,
};
}
if (notification.type === 'chat_message') {
return {
avatar:
,
title,
};
}
return {
avatar: notification.avatar ?
: null,
title,
};
}