Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect } from 'react'
import { useForm } from 'react-hook-form'
import { useDispatch } from 'react-redux'

import { useInmail } from '@hooks'
import { replyInmail } from '@app/services/inmail'
import { addNotification } from '@app/redux/notification/notification.actions'

import Modal from '@components/UI/modal/Modal'
import Input from '@components/UI/inputs/Input'
import Ckeditor from '@components/common/ckeditor/Ckeditor'

export default function ReplyModal() {
  const { replyModalShow, closeReply, selectedMessage } = useInmail()
  const dispatch = useDispatch()

  const {
    setValue,
    handleSubmit,
    register,
    reset,
    formState: { isSubmitting, errors }
  } = useForm({
    defaultValues: {
      body: '',
      subject: '',
      filename: ''
    }
  })

  const onSend = handleSubmit(async (message) => {
    try {
      const result = await replyInmail(selectedMessage?.send_link, message)
      dispatch(addNotification({ style: 'success', msg: result }))
      closeReply()
      reset()
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: error.message }))
    }
  })

  useEffect(() => {
    const requiredErrorMsg = 'Este campo es requerido'
    register('body', { required: requiredErrorMsg })
    register('subject', { required: requiredErrorMsg })
    register('filename')
  }, [replyModalShow])

  return (
    <Modal
      show={replyModalShow}
      title={`Respuesta a ${selectedMessage?.name}`}
      onAccept={onSend}
      loading={isSubmitting}
      onClose={closeReply}
    >
      <Input label='Para' value={selectedMessage?.name} disabled />

      <Input
        label='Asunto'
        onChange={(e) => setValue('subject', e.target.value)}
      />

      <Ckeditor onChange={(value) => setValue('body', value)} />

      <Input
        type='file'
        label='Adjunto'
        accept='image/*'
        onChange={(e) => setValue('filename', e.target.files[0])}
        error={errors.filename?.message}
      />
    </Modal>
  )
}