Proyectos de Subversion LeadersLinked - SPA

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

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

import Form from '../UI/form/Form'
import FormInputText from '../UI/form/FormInputText'
import SelectInput from '../UI/form/SelectField'
import Modal from '../UI/modal/Modal'

const reasons = [
  {
    name: 'Contenido sexual',
    value: 's'
  },
  {
    name: 'Contenido ofensivo',
    value: 'o'
  },
  {
    name: 'Discriminación',
    value: 'd'
  },
  {
    name: 'Adicciones',
    value: 'a'
  },
  {
    name: 'Terrorismo',
    value: 't'
  },
  {
    name: 'Otro',
    value: 'ot'
  }
]

const block_options = [
  {
    name: 'Sí',
    value: 'y'
  },
  {
    name: 'No',
    value: 'n'
  }
]

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

  const { control, errors, handleSubmit } = useForm()

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

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

      onComplete()
      dispatch(addNotification({ style: 'success', msg: data }))
      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()}`}
    >
      <Form onSubmit={onSubmit} autoComplete='off'>
        <SelectInput
          id='reason'
          name='reason'
          label='Motivo'
          options={reasons}
          control={control}
          error={errors.reason?.message}
          rules={{ required: true }}
        />

        <SelectInput
          id='block_user'
          name='block_user'
          label='Bloquear a este usuario'
          options={block_options}
          control={control}
          error={errors.block_user?.message}
          rules={{ required: true }}
        />

        <FormInputText
          name='comment'
          control={control}
          rules={{ required: false }}
        />
      </Form>
    </Modal>
  )
}