Proyectos de Subversion LeadersLinked - SPA

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

import Modal from '../modal/Modal'
import Spinner from '../Spinner'
import DropzoneComponent from '../../dropzone/DropzoneComponent'
import FormErrorFeedback from '../form/FormErrorFeedback'
import { Box } from '@mui/material'

const CoverModal = ({
  show = false,
  sizes = '',
  onClose = () => {},
  onConfirm = async () => {}
}) => {
  const [loading, setLoading] = useState(false)

  const labels = useSelector(({ intl }) => intl.labels)

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

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

  const onSubmit = handleSubmit(async (data) => {
    setLoading(true)
    await onConfirm(data)
    setLoading(false)
  })

  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>
      )}
      {loading && (
        <Box
          sx={{
            position: 'absolute',
            zIndex: 50,
            width: '100%',
            height: '100%',
            top: 0,
            left: 0,
            display: 'grid',
            placeItems: 'center'
          }}
        >
          <Spinner />
        </Box>
      )}
    </Modal>
  )
}

export default CoverModal