import React, { useState } from 'react'

// Components
import Autosuggest from '../Utils/Autosuggest'
import GooglePlacesAutocomplete from '../Utils/GooglePlacesAutocomplete'
import Results from '../Utils/Results'

// types
export type Place = {
  name?: string
  lat?: number
  lng?: number
}

// context
export const PlaceContext = React.createContext<Place | null>(null)

const ClubSearch = () => {
  const [place, setPlace] = useState<Place>({})
  const [sport, setSport] = React.useState<string | null>(null)

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
  }

  const handleReset = () => setSport(null)

  return (
    <PlaceContext.Provider value={place}>
      <form onSubmit={handleSubmit} autoComplete="off">
        <Autosuggest
          suggestions={sports}
          label="Find an activity"
          placeholder="Maybe surfing?"
          onSelect={setSport}
          onReset={handleReset}
        />
        <GooglePlacesAutocomplete label="In" setPlace={setPlace} />
        <Results sport={sport} />
      </form>
    </PlaceContext.Provider>
  )
}