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

import LoadingIndicator from '../components/LoadingIndicator.js'
import Subject from '../components/Subject.js'
import SubjectSelector from '../components/SubjectSelector.js'

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

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

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

  if (data) {
    let currSubj = data.Subjects.find((subj) => {
      return subj.Name === activeSubjName
    })

    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>
        <SubjectSelector
          data={data}
          activeSubjName={activeSubjName}
          searchTerm={searchTerm}
          onSubjSelect={(subjName) => { setActiveSubjName(subjName) }}
        />
        <hr />
        <div>
          <Subject
            subj={currSubj}
          />
        </div>
      </div>
    )
  } else {
    return (
      <LoadingIndicator />
    )
  }
}