import { type MouseEvent, useRef } from 'react';

import { IconDotsVertical } from '@material-hu/icons/tabler';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';
import HuMenu from '@material-hu/components/design-system/Menu';
import HuMenuItem from '@material-hu/components/design-system/Menu/components/MenuItem';

import { logEvent } from 'src/config/logging';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { type NotificationItem } from '../../types';
import { EventName } from 'src/types/amplitude';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type NotificationsOptionsProps = {
  notification: NotificationItem;
  open: boolean;
  onToggle: () => void;
  onClose: () => void;
  isMarkingRead: boolean;
  onRead: (id: string, read: boolean) => void;
  onDelete: (id: string) => void;
};

/** Set to true when delete notification is supported. */
const ENABLE_DELETE_ACTION = false;

const ICON_BUTTON_SX = {
  minWidth: 0,
  m: 0,
  p: 0,
  width: 16,
  height: 16,
  color: 'new.text.neutral.default',
  '& svg': { fontSize: 16 },
} as const;

const NotificationsOptions = ({
  notification,
  open,
  onToggle,
  onClose,
  isMarkingRead,
  onRead,
  onDelete,
}: NotificationsOptionsProps) => {
  const anchorRef = useRef<HTMLButtonElement | null>(null);
  const { t } = useLokaliseTranslation('notifications_center');
  const ThemeProvider = useHuGoTheme();
  const { id, isRead, module } = notification;
  const menuId = `notification-options-${id}`;

  const stopAndClose = (e: MouseEvent) => {
    e.stopPropagation();
    onClose();
  };

  const handleMarkAsRead = (e: MouseEvent) => {
    e.stopPropagation();
    logEvent(EventName.NC_MARK_AS_READ, { module });
    onRead(id, !isRead);
    onClose();
  };

  const handleDelete = (e: MouseEvent) => {
    e.stopPropagation();
    onDelete(id);
    onClose();
  };

  return (
    <ThemeProvider>
      <Button
        ref={anchorRef}
        className="more-button"
        aria-controls={menuId}
        aria-haspopup="true"
        aria-expanded={open ? 'true' : undefined}
        onClick={e => {
          e.stopPropagation();
          onToggle();
        }}
        sx={ICON_BUTTON_SX}
      >
        <IconDotsVertical />
      </Button>
      <HuMenu
        open={open}
        anchorEl={anchorRef.current}
        onClose={stopAndClose}
        aria-labelledby={menuId}
        sx={{ p: 0 }}
        fixedDimensions={false}
      >
        <HuMenuItem
          disabled={isMarkingRead}
          onClick={handleMarkAsRead}
        >
          <Typography
            variant="globalXS"
            fontWeight="fontWeightSemiBold"
            noWrap
          >
            {t(isRead ? 'mark_unread' : 'mark_read')}
          </Typography>
        </HuMenuItem>
        {ENABLE_DELETE_ACTION && (
          <HuMenuItem onClick={handleDelete}>
            <Typography
              variant="globalXS"
              fontWeight="fontWeightSemiBold"
              noWrap
            >
              {t('delete_notification')}
            </Typography>
          </HuMenuItem>
        )}
      </HuMenu>
    </ThemeProvider>
  );
};

export default NotificationsOptions;