import { useState } from 'react'
import useSettings from 'hooks/useSettings'
import fetchJson from 'helpers/fetchJson'
import styles from '../styles/Radio.module.scss'

const searchQuery = async (query, setResults) => {
  setResults('loading')
  const results = await fetchJson('/api/radio/stations', {
    method: 'POST',
    body: JSON.stringify({ query })
  })

  setResults(results)
}

const Search = ({ setResults }) => {
  const [query, setQuery] = useState('')
  const changeQuery = e => setQuery(e.target.value)
  const { t } = useSettings()

  const onSubmit = e => {
    e.preventDefault()
    searchQuery(query, setResults)
  }

  return (
    <form
      className={styles.search}
      onSubmit={onSubmit}
    >
      <input
        type="text"
        onChange={changeQuery}
        placeholder={t('radio_search_placeholder')}
        value={query}
      />
      <span
        className="window__button"
        onClick={onSubmit}
      >
        {t('radio_search')}
      </span>
    </form>
  )
}

export default Search