import { FC, useState } from 'react';

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

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

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

import { ChatForwardMessage } from '../actions';

export type ForwardMessageOptionProps = {
  closeMenu: any;
  messageId: string | number;
  chatId: number;
  onOpenDialog: () => void;
};

export const ForwardMessageOption: FC<ForwardMessageOptionProps> = props => {
  const { closeMenu, messageId, chatId, onOpenDialog } = props;

  const [open, setOpen] = useState<boolean>(false);

  const { t } = useTranslation();

  const closeForwardMessageModal = event => {
    closeMenu(event);
    setOpen(false);
  };

  const openForwardMessageModal = () => {
    setOpen(true);
    onOpenDialog();
  };

  return (
    <>
      {open && (
        <ChatForwardMessage
          open={open}
          onCancel={closeForwardMessageModal}
          messageId={messageId}
          chatId={chatId}
        />
      )}
      <MenuItem onClick={openForwardMessageModal}>
        {t('FORWARD_MESSAGE')}
      </MenuItem>
    </>
  );
};

export default ForwardMessageOption;
