Proyectos de Subversion LeadersLinked - SPA

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

import { block_options, reasons } from '@app/constants/report'
import { sendReport } from '@app/services/reports'
import { addNotification } from '@app/redux/notification/notification.actions'
import { closeReportModal } from '@app/redux/report/report.actions'

import Modal from '@components/UI/modal/Modal'
import Input from '@components/UI/inputs/Input'
import Select from '@components/UI/inputs/Select'

export default function ReportModal() {
  const { showModal, type, reportUrl, onComplete } = useSelector(
    (state) => state.report
  )
  const dispatch = useDispatch()

  const {
    control,
    getValues,
    handleSubmit,
    formState: { isSubmitting, errors }
  } = useForm({
    defaultValues: {
      reason: reasons[0].value,
      block_user: block_options[1].value,
      comment: ''
    }
  })

  const onSubmit = handleSubmit(async () => {
    try {
      const formData = getValues()
      const { success, data } = await sendReport(reportUrl, formData)

      if (!success) {
        throw new Error(data)
      }

      if (onComplete) {
        onComplete()
      }

      dispatch(addNotification({ style: 'success', msg: data.message }))
      dispatch(closeReportModal())
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: error.message }))
    }
  })

  const closeModal = () => dispatch(closeReportModal())

  return (
    <Modal
      show={showModal}
      onClose={closeModal}
      title={`Reportar ${type.toLowerCase()}`}
      onAccept={onSubmit}
      loading={isSubmitting}
    >
      <Select
        label='Motivo'
        name='reason'
        placeholder='Seleccione un motivo'
        options={reasons}
        control={control}
        rules={{ required: 'Este campo es requerido' }}
        error={errors.reason?.message}
        defaultValue={reasons[0].value}
      />

      <Select
        name='block_user'
        label='Bloquear a este usuario'
        options={block_options}
        placeholder='Seleccione un opción'
        control={control}
        rules={{ required: 'Este campo es requerido' }}
        error={errors.block_user?.message}
        defaultValue={block_options[1].value}
      />

      <Input
        name='comment'
        label='Comentario'
        placeholder='(Opcional)'
        control={control}
        error={errors.comment?.message}
      />
    </Modal>
  )
}