import { FC } from 'react';
import { useMutation } from 'react-query';

import { Typography, MenuItem } from '@material-hu/mui';

import { useAuth } from 'src/contexts/JWTContext';
import { markAsUnread } from 'src/services/chats';
import { ChatListItem } from 'src/types/chats';

import { useTranslation } from 'src/components/dashboard/chat/i18n';

export type MarkAsUnreadOptionProps = {
  thread: ChatListItem;
  onClose: any;
};

export type UnreadUpdate = {
  chatId: number;
  userId: number;
};

const MarkAsUnreadOption: FC<MarkAsUnreadOptionProps> = props => {
  const { thread, onClose } = props;
  const { user } = useAuth();

  const mutation = useMutation((data: UnreadUpdate) => markAsUnread(data));

  const { t } = useTranslation();

  const handleClick = event => {
    event.stopPropagation();
    const data = { chatId: thread.chat.id, userId: user.id };
    mutation.mutate(data);
    onClose(event);
  };

  return (
    <MenuItem onClick={handleClick}>
      <Typography
        sx={{
          display: 'flex',
          alignItems: 'center',
        }}
      >
        {t('MARK_AS_UNREAD')}
      </Typography>
    </MenuItem>
  );
};

export default MarkAsUnreadOption;
