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