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 Sleep from '../components/sleep'

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

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

  const [sCount, setSCount] = useState(0)
  const [qCount, setQCount] = useState(0)

  useEffect(() => {
    getData().then((result) => {
      setData(result)
      setSCount(result.length)
      setQCount(
        result.reduce((acc, subj) => {
          return acc + subj.Questions.length
        }, 0)
      )
    })
  }, [])

  if (data) {
    let currSubj = data.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>
          {qCount} kérdés, {sCount} tárgy
        </div>
        <Sleep />
        <div>
          <Subject subj={currSubj} />
        </div>
      </div>
    )
  } else {
    return <LoadingIndicator />
  }
}