import React, { PureComponent } from 'react'

import Questions from './Questions.js'
import Sleep from '../components/sleep'

import constants from '../constants.json'

class QuestionSearchResult extends PureComponent {
  render () {
    const { data, searchTerm } = this.props

    let subjs = []
    let results = -1

    const countReducer = (acc, subj) => {
      return acc + subj.Questions.length
    }

    if (searchTerm) {
      subjs = data.reduce((acc, subj) => {
        const resultQuestions = subj.Questions.reduce((qacc, question) => {
          const keys = [ 'Q', 'A', 'data' ]
          keys.some((key) => {
            if (typeof question[key] !== 'string') {
              return false
            }
            if (question[key] && question[key].toLowerCase().includes(searchTerm.toLowerCase())) {
              qacc.push(question)
              return true
            }
          })
          return qacc
        }, [])
        if (resultQuestions.length > 0) {
          acc.push({
            Name: subj.Name,
            Questions: resultQuestions
          })
        }
        return acc
      }, [])
      results = subjs.reduce(countReducer, 0)
    } else {
      results = data.reduce(countReducer, 0)
    }

    const renderCount = () => {
      return (
        <div>
          <div>
            {searchTerm ? '' : 'Kezdj el írni kereséshez!'} {results} {searchTerm ? 'találat' : 'kérdés' } {searchTerm ? subjs.length : data.length} tárgy
          </div>
          <Sleep />
        </div>
      )
    }

    if (results > constants.maxQuestionsToRender) {
      return renderCount()
    } else {
      return (
        <div >
          <div>
            {renderCount()}
          </div>
          <div>
            <Questions
              subjs={subjs}
            />
          </div>
        </div>
      )
    }
  }
}

export default QuestionSearchResult