import HuDialog from '@material-hu/components/design-system/Dialog';

import {
  type ConversationMessage,
  MessageTypeSocket,
} from 'src/pages/dashboard/Conversations/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { useDeleteMessage } from '../../hooks/useConversationsQueries';
import { updateMessage } from '../../queries';

type MessageDeleteProps = {
  onClose: () => void;
  message: ConversationMessage;
};

const MessageDelete = ({ onClose, message }: MessageDeleteProps) => {
  const { t } = useLokaliseTranslation(['chat']);
  const { mutateAsync: deleteMessageMutation, isLoading } = useDeleteMessage({
    onSuccess: () => {
      updateMessage({
        channelId: message.channel,
        newMessage: {
          ...message,
          type: MessageTypeSocket.DELETED,
          hidden: true,
          text: undefined,
        },
      });
      onClose();
    },
  });

  const handleDelete = () => {
    deleteMessageMutation({
      channel: message.channel,
      ts: message.hu_data.message_ts,
    });
  };

  return (
    <HuDialog
      onClose={onClose}
      title={t('chat:delete.confirmation')}
      footerProps={{
        hideBorder: true,
      }}
      primaryButtonProps={{
        children: t('general:delete'),
        onClick: handleDelete,
        color: 'error',
        loading: isLoading,
        disabled: isLoading,
      }}
      secondaryButtonProps={{
        children: t('general:cancel'),
        onClick: onClose,
        disabled: isLoading,
      }}
    />
  );
};

export default MessageDelete;