Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from 'react'
import { useForm } from 'react-hook-form'
import { useSelector } from 'react-redux'
import { Avatar } from '@mui/material'
import styled from 'styled-components'
import SendIcon from '@mui/icons-material/Send'

import Options from '../UI/Option'
import ConfirmModal from '../modals/ConfirmModal'
import FormErrorFeedback from '../UI/FormErrorFeedback'

const StyledCommentForm = styled.form`
  display: flex;
  justify-content: flex-start;
  align-items: center;
  img {
    margin-right: 0.5rem;
    width: 43px;
    height: 43px;
  }
  input {
    flex-grow: 1;
    padding: 0.5rem;
    background-color: var(--bg-color-secondary);
    border: 1px solid var(--border-primary);
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
  }
  button {
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
  }
`

export const CommentForm = ({
  image = '/images/avatar.jpg',
  onSubmit = () => null,
}) => {
  const { register, handleSubmit, errors, reset } = useForm()

  const labels = useSelector(({ intl }) => intl.labels)

  const submitHandler = handleSubmit(async (data) => {
    await onSubmit(data)
    reset()
  })

  return (
    <>
      <StyledCommentForm onSubmit={submitHandler}>
        {image && <Avatar src={image} alt="Profile image" />}
        <input
          type="text"
          name="comment"
          maxLength="256"
          placeholder={labels.write_a_comment}
          ref={register({ required: 'El campo es requerido' })}
        />
        <button className="btn btn-primary">
          <SendIcon />
        </button>
      </StyledCommentForm>
      {errors.comment && (
        <FormErrorFeedback>{errors.comment.message}</FormErrorFeedback>
      )}
    </>
  )
}

export const CommentsList = ({ comments, onDelete }) => {
  return (
    <ul className="comment-list">
      {comments.map((comment) => {
        return (
          <CommentsList.Item
            comment={comment}
            onDelete={onDelete}
            key={comment.unique}
          />
        )
      })}
    </ul>
  )
}

const Comment = ({ onDelete, comment }) => {
  const [showConfirmModal, setShowConfirmModal] = useState(false)
  const labels = useSelector(({ intl }) => intl.labels)

  const {
    unique,
    user_url,
    user_name,
    // user_image = '/images/avatar.jpg',
    time_elapsed,
    comment: content,
    link_delete,
  } = comment

  const toggleModal = () => {
    setShowConfirmModal(!showConfirmModal)
  }

  return (
    <li>
      <div className="comment-container">
        <div className="comment-content">
          <div className="info">
            <a href={user_url}>
              <h3>{user_name}</h3>
            </a>
            <span>{time_elapsed}</span>
            <span>
              {link_delete && (
                <Options
                  options={[
                    {
                      label: labels.delete,
                      action: toggleModal,
                    },
                  ]}
                />
              )}
            </span>
          </div>
          <p>{content}</p>
        </div>
      </div>
      <ConfirmModal
        show={showConfirmModal}
        onClose={toggleModal}
        onAccept={() => onDelete(unique, link_delete)}
        acceptLabel={labels.accept}
      />
    </li>
  )
}

CommentsList.Item = Comment