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

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

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

export default function SubjectView(props) {
  const { data, onChange, deleteQuestion } = props
  const [activeSubjName, setActiveSubjName] = useState('')
  const [searchTerm, setSearchTerm] = useState('')

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

  useEffect(() => {
    setSCount(data.length)
    setQCount(
      data.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>
        <hr />
        <SubjectSelector
          data={data}
          activeSubjName={activeSubjName}
          searchTerm={searchTerm}
          onSubjSelect={(subjName) => {
            setActiveSubjName(subjName)
          }}
        />
        <hr />
        <div>
          {qCount} kérdés, {sCount} tárgy
        </div>
        <div>
          <Subject
            onChange={onChange}
            subj={currSubj}
            deleteQuestion={deleteQuestion}
          />
        </div>
      </div>
    )
  } else {
    return <LoadingIndicator />
  }
}