Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { ButtonGroup, IconButton, Box } from '@mui/material';
import { Delete, Block, Reply } from '@mui/icons-material';

import { useInmail } from '@hooks';
import { deleteInmail } from '@app/services/inmail';
import { showReportModal } from '@app/redux/report/report.actions';
import { addNotification } from '@app/redux/notification/notification.actions';
import ComposeButton from './compose-button';
import ReplyModal from './reply-modal';
import ConfirmModal from '@components/modals/ConfirmModal';
import ReportModal from '@components/modals/ReportModal';

export default function ActionsRow() {
  const { uuid } = useParams();
  const { selectedMessage, messages, selectMessage, replyMessage } = useInmail();
  const [showConfirmModal, setShowConfirmModal] = useState(false);
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const navigateToImbox = () => navigate('/inmail');

  const handleDelete = async () => {
    try {
      const result = await deleteInmail(selectedMessage.delete_link);
      dispatch(addNotification({ style: 'success', msg: result }));
      navigateToImbox();
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: error.message }));
    }
  };

  const handleReport = () => {
    dispatch(
      showReportModal({
        reportUrl: selectedMessage?.block_link,
        type: 'Inmail',
        onComplete: navigateToImbox
      })
    );
  };

  const toggleConfirmModal = () => setShowConfirmModal(!showConfirmModal);

  useEffect(() => {
    if (selectedMessage) return;
    const currentMessage = messages.find((message) => message.email_id === uuid);
    selectMessage(currentMessage);
  }, [selectedMessage, messages, uuid]);

  return (
    <>
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 0.5,
          mb: 1
        }}
      >
        <ComposeButton />

        {uuid && selectedMessage ? (
          <ButtonGroup>
            <IconButton onClick={() => replyMessage(selectedMessage)}>
              <Reply />
            </IconButton>
            <ReplyModal />

            <IconButton onClick={toggleConfirmModal}>
              <Delete />
            </IconButton>

            <IconButton onClick={handleReport}>
              <Block />
            </IconButton>
          </ButtonGroup>
        ) : null}
      </Box>
      <ConfirmModal show={showConfirmModal} onAccept={handleDelete} onClose={toggleConfirmModal} />
      <ReportModal />
    </>
  );
}