import React from 'react';
import Box from '@mui/material/Box';
import NotificationsOutlinedIcon from '@mui/icons-material/NotificationsOutlined';
import NotificationsOffOutlinedIcon from '@mui/icons-material/NotificationsOffOutlined';
import Badge from '@mui/material/Badge';
import Menu from '@mui/material/Menu';
import Button from '@mui/material/Button';

import NotificationToast, {
  NotificationToastElement,
  NotificationToastProps,
} from './NotificationToast';
import { HermesNotification, NotificationProps } from './types';
import NotificationList from './NotificationList';
import NotificationBox from './NotificationBox';
import { notificationStates } from './defaultStates';

const isNotificationRecent = (createdAt: string) =>  {
  const createdAtDate = new Date(createdAt);
  const now = new Date();

  const difference = now.getTime() - createdAtDate.getTime();

  const minutesDifference = difference / 60000;

  return minutesDifference <= 5;
}

const AppNotification = (props: NotificationProps) => {
  const { notifications, error, onClick, noPerms, onNotificationClick } = props;
  const toastRef = React.useRef<NotificationToastElement>(null);

  const [notificationsState, setNotificationsState] =
    React.useState<HermesNotification[] | null>(null);

  const showToastNotification = (
    notification: HermesNotification,
  ) => {
    if (notification) {
      const showToast = toastRef.current?.showToast;
      if (!showToast) return;
      const toastParams: NotificationToastProps = {
        child: <NotificationBox notification={notification} onNotificationClick={onNotificationClick} />,
      };
      showToast(toastParams);
    }
  };

  const showErrorStateNotification = () => {
    if (error || noPerms) {
      const stateKeyName = error ? 'error' : noPerms ? 'noPerms' : '';
      const errorSystemNotification = notificationStates[stateKeyName]
      showToastNotification(errorSystemNotification.notification);
    }
  }

  React.useEffect(() => {
    showErrorStateNotification()
  }, [error, noPerms]);

  React.useEffect(() => {
    if (notificationsState) {
      const lastNotification = notifications[notifications.length - 1];
      if (lastNotification) {
        isNotificationRecent(lastNotification.createdAt) && showToastNotification(lastNotification);
      }
    }
    setNotificationsState(notifications);
  }, [notifications.length]);

  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    if (noPerms) {
      showErrorStateNotification()
    } else {
      setAnchorEl(event.currentTarget);
      onClick && onClick()
    }
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <Box>
      <NotificationToast ref={toastRef} />
      <Button
        aria-controls={open ? 'notification-list' : undefined}
        aria-haspopup="true"
        aria-expanded={open ? 'true' : undefined}
        onClick={handleClick}
      >
        {(!error && !noPerms) && (
          <Badge
            color="error"
            overlap="circular"
            variant="dot"
            invisible={false}
          >
            <NotificationsOutlinedIcon
              sx={{ width: '32px', height: '32px', color: '#FFFFFF' }}
            />
          </Badge>
        )}

        {(error || !!noPerms) && (
          <NotificationsOffOutlinedIcon
            sx={{ width: '32px', height: '32px', color: '#FFFFFF' }}
          />
        )}
      </Button>

      <Menu
        id="notification-list"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        MenuListProps={{ sx: { padding: 0 } }}
      >
        <NotificationList
          onClickClose={handleClose}
          notifications={notifications}
          onNotificationClick={onNotificationClick}
        />
      </Menu>
    </Box>
  );
};

AppNotification.defaultProps = {
  error: null,
  noPerms: null
};

export default AppNotification;