import React, { useState, useEffect } from 'react'
import fetch from 'unfetch'

import LoadingIndicator from '../components/LoadingIndicator.js'
import QuestionSearchResult from '../components/QuestionSearchResult.js'

import styles from './allQuestions.module.css'
import constants from '../constants.json'

export default function AllQuestions (props) {
  const [data, setData] = useState(null)
  const [searchTerm, setSearchTerm] = useState('')

  useEffect(() => {
    fetch(`${constants.apiUrl}data.json`)
      .then((resp) => {
        return resp.json()
      })
      .then((data) => {
        setData(data)
      })
  }, [])

  if (data) {
    return (
      <div>
        <div className={styles.searchContainer}>
          <input
            placeholder='Keresés...'
            className={styles.searchBar}
            type='text'
            value={searchTerm}
            onChange={(e) => { setSearchTerm(e.target.value) }}
          />
          <button
            onClick={() => {
              setSearchTerm('')
            }}
            className={styles.clearButton}
          >
             X
          </button>
        </div>
        <hr />
        <div>
          <QuestionSearchResult
            data={data}
            searchTerm={searchTerm}
          />
        </div>
      </div>
    )
  } else {
    return (
      <LoadingIndicator />
    )
  }
}