import React from 'react';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
import { HermesNotification, OnNotificationClick } from './types';
import NotificationBox from './NotificationBox';

interface NotificationListProps {
  notifications: HermesNotification[];
  onClickClose: () => void;
  title?: string;
  onNotificationClick?: OnNotificationClick
}

const sortByRecentDates = (list: HermesNotification[]) => {
  if (list.length === 0) {
    return []
  }
  return list.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
}

const NotificationList = (props: NotificationListProps) => {
  const { notifications, onClickClose, title, onNotificationClick } = props;
  const [sortedNotifications, setSortedNotifications] =
    React.useState<{
      today: HermesNotification[];
      yesterday: HermesNotification[];
    } | null>(null);

  React.useEffect(() => {
    if (notifications) {
      const today = new Date();
      const todayList: HermesNotification[] = [];
      const yesterdayList: HermesNotification[] = [];
      notifications.forEach((notification) => {
        const notificationDate = new Date(notification.createdAt).getDate();
        if (notificationDate === today.getDate()) {
          todayList.push(notification);
        } else if (notificationDate === today.getDate() - 1) {
          yesterdayList.push(notification);
        }
      });
      setSortedNotifications({ yesterday: sortByRecentDates(yesterdayList), today: sortByRecentDates(todayList) });
    }
  }, [notifications]);

  return (
    <Box sx={{ width: '326px' }}>
      <Box
        sx={{
          p: 2,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
      >
        <Typography variant="h6">{title}</Typography>
        <IconButton
          sx={{ padding: 0 }}
          onClick={onClickClose}
          aria-label="close"
        >
          <CloseOutlinedIcon />
        </IconButton>
      </Box>
      <Divider sx={{ borderColor: '#D7D3D3' }} />

      {!!sortedNotifications?.today.length && (
        <>
          <Typography variant="h6" sx={{ px: 2, py: 0.5 }}>
            Hoy
          </Typography>
          <Divider sx={{ borderColor: '#D7D3D3' }} />
          {sortedNotifications.today.map((notification) => (
            <React.Fragment key={notification.id}>
              <NotificationBox notification={notification} onNotificationClick={onNotificationClick}/>
              <Divider sx={{ borderColor: '#D7D3D3' }} />
            </React.Fragment>
          ))}
        </>
      )}

      {!!sortedNotifications?.yesterday.length && (
        <>
          <Typography variant="h6" sx={{ px: 2, py: 0.5 }}>
            Ayer
          </Typography>
          <Divider sx={{ borderColor: '#D7D3D3' }} />
          {sortedNotifications.yesterday.map((notification) => (
            <React.Fragment key={notification.id}>
              <NotificationBox notification={notification} onNotificationClick={onNotificationClick}/>
              <Divider sx={{ borderColor: '#D7D3D3' }} />
            </React.Fragment>
          ))}
        </>
      )}
    </Box>
  );
};
NotificationList.defaultProps = {
  title: 'Notificaciones',
};
export default NotificationList;