Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import { Box, Typography } from '@mui/material';
import { ChatOutlined } from '@mui/icons-material';

import { useAnswerComments } from '@my-coach/hooks';
import { parse } from '@shared/utils';

import {
  Card,
  CardActions,
  CardContent,
  CardHeader,
  CommentForm,
  Menu,
  Button,
  CommentList
} from '@shared/components';
import { useAlertModal } from '@shared/hooks';

export function AnswerCard({
  answer: {
    uuid = '',
    time_elapsed = '',
    user_image = '',
    user_name = '',
    text = '',
    total_comments = 0,
    total_reactions = 0,
    comments = [],
    link_add_comment = ''
  },
  onEdit,
  onDelete,
  onUpdateComments
}) {
  const [showComments, setShowComments] = useState(false);
  const labels = useSelector(({ intl }) => intl.labels);

  const { showAlert, closeAlert } = useAlertModal();

  const {
    comments: answerComments,
    addComment,
    deleteComment
  } = useAnswerComments(comments, {
    onAddComment: (data) => {
      onUpdateComments(uuid, data);
    },
    onDeleteComment: (data) => {
      onUpdateComments(uuid, data);
      closeAlert();
    }
  });

  const handleAddComment = (comment) => {
    addComment(link_add_comment, comment);
  };

  const handleDeleteComment = (url) => {
    showAlert({
      title: 'Eliminar comentario',
      message: '¿Estás seguro de querer eliminar este comentario?',
      onConfirm: () => deleteComment(url)
    });
  };

  /* const addComment = (comment) => {
    const formData = new FormData();
    formData.append('comment', comment);

    axios
      .post(link_add_comment, formData)
      .then((response) => {
        const { success, data } = response.data;

        if (!success) {
          const errorMessage =
            typeof data === 'string' ? data : 'Error interno. Intente más tarde.';
          dispatch(addNotification({ style: 'danger', msg: errorMessage }));
          return;
        }

        setComments([...comments, data.item]);
        updateComments(data.total_comments_question);
        setTotalComments(data.total_comments_answer);
      })
      .catch((err) => {
        dispatch(addNotification({ style: 'danger', msg: err.message }));
      });
  };

  const deleteComment = (commentUnique, deleteCommentUrl) => {
    axios
      .post(deleteCommentUrl)
      .then((response) => {
        const { success, data } = response.data;

        if (!success) {
          const errorMessage =
            typeof data === 'string' ? data : 'Error interno. Intente más tarde.';

          dispatch(addNotification({ style: 'danger', msg: errorMessage }));
          return;
        }

        const newComments = comments.filter(({ unique }) => unique !== commentUnique);

        dispatch(addNotification({ style: 'success', msg: data.message }));

        setComments(newComments);
        updateComments(data.total_comments_question);
        setTotalComments(data.total_comments_answer);
      })
      .catch((err) => {
        dispatch(addNotification({ style: 'danger', msg: err.message }));
      });
  }; */

  // const ReactionsButton = withReactions(Button);

  return (
    <Card>
      <CardHeader
        avatar={user_image}
        title={user_name}
        subheader={time_elapsed}
        renderAction={() => (
          <Menu>
            {onDelete && <Menu.Item onClick={onDelete}>Borrar</Menu.Item>}
            {onEdit && <Menu.Item onClick={onEdit}>{labels.edit}</Menu.Item>}
          </Menu>
        )}
      />

      <CardContent>
        <Typography variant='body1'>{parse(text)}</Typography>

        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
          <Typography variant='overline'>{`${total_reactions} ${labels.reactions}`}</Typography>
          <Typography variant='overline'>{`${total_comments} ${labels.comments}`}</Typography>
        </Box>
      </CardContent>

      <CardActions>
        {/* {link_save_reaction && (
            <ReactionsButton
              currentReactionType={reaction}
              saveUrl={link_save_reaction}
              deleteUrl={link_reaction_delete}
              onReaction={({
                total_reactions_answer,
                total_reactions_question
              }) => {
                setTotalReactions(total_reactions_answer)
                updateReactions(total_reactions_question)
              }}
            />
          )} */}
        {link_add_comment && (
          <Button onClick={() => setShowComments(!showComments)}>
            <ChatOutlined />
            {labels.comment}
          </Button>
        )}
      </CardActions>

      <Box
        sx={{
          padding: 1,
          display: showComments ? 'flex' : 'none',
          flexDirection: 'column',
          gap: 1,
          width: '100%'
        }}
      >
        <CommentForm onSubmit={handleAddComment} />
        <CommentList comments={answerComments} onDelete={handleDeleteComment} />
      </Box>
    </Card>
  );
}