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;
  input {
    flex-grow: 1;
    padding: 0.5rem;
    background-color: var(--bg-color-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
  }
  button {
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    border: 1px solid var(--button-bg) !important;
  }
`

const StyledCommentList = styled.ul`
  display: flex;
  flex-direction: column;
  padding-right: 0.5rem;
  gap: 0.5rem;
  margin-top: 0.5rem;
  max-height: 300px;
  overflow-y: auto;
  width: 100%;
`

const StyledComment = styled.div`
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  .content {
    background-color: var(--chat-send);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 0.5rem;
    max-width: 100%;
    overflow: hidden;
    padding: 0.5rem;
    position: relative;
    p {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .info {
    display: inline-flex;
    flex-direction: column;
    h3 {
      color: var(--title-color);
      font-weight: 600;
    }
    span {
      color: var(--subtitle-color);
      font-size: 0.9rem;
    }
  }
`

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"
            sx={{ marginRight: '.5rem', width: '45px', height: '45px' }}
          />
        )}
        <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 (
    <>
      <StyledCommentList>
        {comments.map((comment) => {
          return (
            <li key={comment.unique}>
              <CommentsList.Item comment={comment} onDelete={onDelete} />
            </li>
          )
        })}
      </StyledCommentList>
    </>
  )
}

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 (
    <>
      <StyledComment>
        <div className="content">
          <div className="info">
            <a href={user_url}>
              <h3>{user_name}</h3>
            </a>
            <span>{time_elapsed}</span>
          </div>
          {link_delete && (
            <Options
              options={[
                {
                  label: labels.delete,
                  action: toggleModal,
                },
              ]}
              right="0.5rem"
              top="1.5rem"
            />
          )}
          <p>{content}</p>
        </div>
      </StyledComment>
      <ConfirmModal
        show={showConfirmModal}
        onClose={toggleModal}
        onAccept={() => onDelete(unique, link_delete)}
        acceptLabel={labels.accept}
      />
    </>
  )
}

CommentsList.Item = Comment