import { FC } from 'react';
import { useMatch } from 'react-router';

import 'src/components/dashboard/chat/i18n';

import MenuItem from '@material-hu/mui/MenuItem';

import { useReplyMessage } from 'src/contexts/ReplyMessageContext';
import { ChatType } from 'src/types/chats';
import { FormType } from 'src/types/forms';

import { useTranslation } from 'src/components/dashboard/chat/i18n';
import { getMessage } from 'src/components/dashboard/chat/queries';
import { formSkeletonRoutes } from 'src/components/dashboard/form/routes';

export type ReplyMessageOptionProps = {
  closeMenu: (event) => void;
  chatId: string | number;
  messageId: string | number;
  chatType: ChatType;
};

export const ReplyMessageOption: FC<ReplyMessageOptionProps> = props => {
  const { closeMenu, chatId, messageId, chatType } = props;

  const { t } = useTranslation();

  const { setReply } = useReplyMessage();

  const matchFormChat = useMatch(formSkeletonRoutes.form.chat(FormType.FORM));

  const handleOnClick = event => {
    closeMenu(event);
    const message = getMessage(chatId, messageId, chatType, !!matchFormChat);
    if (message) setReply(message);
  };

  return <MenuItem onClick={handleOnClick}>{t('REPLY_MESSAGE')}</MenuItem>;
};

export default ReplyMessageOption;