Proyectos de Subversion LeadersLinked - SPA

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

import Modal from 'components/UI/modal/Modal'
import UbicationInput from 'components/UI/inputs/UbicationInput'
import FormErrorFeedback from 'components/UI/form/FormErrorFeedback'

const LocationModal = ({
  show = false,
  onConfirm = () => {},
  onClose = () => {}
}) => {
  const labels = useSelector(({ intl }) => intl.labels)

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

  const toggleModal = () => {
    reset()
    onClose()
  }

  const addressHandler = (address) => {
    Object.entries(address).forEach(([key, value]) => {
      if (value) {
        register(key)
        clearErrors(key)
        setValue(key, value)
      }
    })
  }

  const onSubmit = handleSubmit((data) => onConfirm(data))

  useEffect(() => {
    register('formatted_address', {
      required: 'por favor seleccione una ubicación correcta'
    })
  }, [])

  return (
    <Modal
      title={labels.location}
      show={show}
      onClose={toggleModal}
      onAccept={onSubmit}
    >
      <UbicationInput
        onGetAddress={addressHandler}
        settedQuery={watch('formatted_address')}
      />
      {errors.formatted_address && (
        <FormErrorFeedback>
          {errors.formatted_address.message}
        </FormErrorFeedback>
      )}
    </Modal>
  )
}

export default LocationModal