Proyectos de Subversion LeadersLinked - SPA

import { useState, useEffect, useRef } from 'react'

export function useLocationAutocomplete() {
  const [address, setAddress] = useState({})
  const [error, setError] = useState(null)
  const inputRef = useRef(null)
  let autoComplete

  function handleScriptLoad(autoCompleteRef) {
    autoComplete = new window.google.maps.places.Autocomplete(
      autoCompleteRef.current,
      { types: ['(cities)'] }
    )
    autoComplete.setFields([
      'address_components',
      'formatted_address',
      'geometry'
    ])
    autoComplete.addListener('place_changed', handlePlaceSelect)
  }

  function handlePlaceSelect() {
    setAddress({})
    const addressPlace = autoComplete.getPlace()
    const formattedAddress = addressPlace.formatted_address
    const addressComponents = [
      ...addressPlace.address_components,
      {
        latitude: addressPlace.geometry.location.lat(),
        longitude: addressPlace.geometry.location.lng(),
        types: ['geometry']
      }
    ]
    const address = {}

    if (formattedAddress) {
      setError(null)
      addressComponents?.forEach((address_component) => {
        const address_component_name = address_component.long_name
        const address_component_type = address_component.types[0]

        switch (address_component_type) {
          case 'route':
            address.address1 = address_component_name
            break
          case 'sublocality':
            address.address2 = address_component_name
            break
          case 'locality':
            address.city1 = address_component_name
            break
          case 'administrative_area_level_2':
            address.city2 = address_component_name
            break
          case 'administrative_area_level_1':
            address.state = address_component_name
            break
          case 'country':
            address.country = address_component_name
            break
          case 'postal_code':
            address.postal_code = address_component_name
            break
          case 'geometry':
            address.latitude = address_component.latitude
            address.longitude = address_component.longitude
            break
          default:
            break
        }
      })

      setAddress({ ...address, formatted_address: formattedAddress })
    } else {
      setError('Ha ocurrido un error')
    }
  }

  useEffect(() => {
    handleScriptLoad(inputRef)
  }, [])

  return { address, error, ref: inputRef }
}