Proyectos de Subversion LeadersLinked - SPA

import React 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 '@components/UI/inputs/Input'

export default function CommentForm({ onSubmit = () => null }) {
  const labels = useSelector(({ intl }) => intl.labels)

  const {
    control,
    handleSubmit,
    reset,
    formState: { errors }
  } = useForm({
    defaultValues: {
      comment: ''
    }
  })

  const submitHandler = handleSubmit(({ comment }) => {
    onSubmit(comment)
    reset()
  })

  return (
    <StyledCommentForm onSubmit={submitHandler} autoComplete='off'>
      <Input
        name='comment'
        placeholder={labels.write_a_comment}
        control={control}
        error={errors.comment?.message}
        rules={{ required: 'Este campo es requerido' }}
      />

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