Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect } from 'react'
import { useForm } from 'react-hook-form'
import { useSelector } from 'react-redux'
import { IconButton } from '@mui/material'
import { Send } from '@mui/icons-material'

import { StyledCommentForm } from './comments-ui'
import Input from '@app/components/UI/Input'

export default function CommentForm({ onSubmit = () => null }) {
  const labels = useSelector(({ intl }) => intl.labels)
  const { register, handleSubmit, errors, setValue, watch } = useForm({
    defaultValues: {
      comment: ''
    }
  })
  const currentComment = watch('comment')

  const submitHandler = handleSubmit(({ comment }) => {
    onSubmit(comment)
    setValue('comment', '')
  })

  useEffect(() => {
    register('comment', { required: true })
  }, [])

  return (
    <StyledCommentForm onSubmit={submitHandler} autoComplete='off'>
      {/* {image && (
        <Avatar
          src={}
          alt='Profile image'
          sx={{ width: '45px', height: '45px' }}
        />
      )} */}

      <Input
        type='text'
        name='comment'
        placeholder={labels.write_a_comment}
        primary={false}
        onChange={(e) => setValue('comment', e.target.value)}
        value={currentComment}
        error={errors.comment?.message}
        sx={{ flex: '1 1 50%' }}
      />

      <IconButton type='submit'>
        <Send />
      </IconButton>
    </StyledCommentForm>
  )
}