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 { ChatDeleteMessage } from '../actions';

export type DeleteMessageOptionProps = {
  closeMenu: any;
  messageId: string | number;
  chatId: number;
};

export const DeleteMessageOption: FC<DeleteMessageOptionProps> = props => {
  const { closeMenu, messageId, chatId } = props;

  const [deleteMessageModalOpen, setDeleteMessageModalOpen] =
    useState<boolean>(false);

  const { t } = useTranslation();

  const closeDeleteMessageModal = event => {
    closeMenu(event);
    setDeleteMessageModalOpen(false);
  };

  const openDeleteMessageModal = () => {
    setDeleteMessageModalOpen(true);
  };

  return (
    <>
      {deleteMessageModalOpen && (
        <ChatDeleteMessage
          open={deleteMessageModalOpen}
          onCancel={closeDeleteMessageModal}
          messageId={messageId}
          chatId={chatId}
        />
      )}
      <MenuItem onClick={openDeleteMessageModal}>
        {t('DELETE_MESSAGE')}
      </MenuItem>
    </>
  );
};

export default DeleteMessageOption;