Proyectos de Subversion LeadersLinked - SPA

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

import Modal from '../modal/Modal'
import DropzoneComponent from '../../dropzone/DropzoneComponent'
import FormErrorFeedback from '../form/FormErrorFeedback'

const CoverModal = ({
  show = false,
  sizes = '',
  onClose = () => {},
  onConfirm = async () => {}
}) => {
  const labels = useSelector(({ intl }) => intl.labels)

  const { register, errors, handleSubmit, setValue } = useForm()

  const onUploadedHandler = (files) => {
    setValue('cover', files)
  }

  const onSubmit = handleSubmit(({ cover }) => onConfirm(cover))

  useEffect(() => {
    register('cover', {
      required: 'Este campo es requerido'
    })
  }, [])

  return (
    <Modal
      title={labels.cover}
      show={show}
      onClose={onClose}
      onAccept={onSubmit}
    >
      <DropzoneComponent
        modalType='IMAGE'
        onUploaded={onUploadedHandler}
        recomendationText={`Imágenes recomendadas de ${sizes}`}
      />
      {errors.cover && (
        <FormErrorFeedback>{errors.cover.message}</FormErrorFeedback>
      )}
    </Modal>
  )
}

export default CoverModal