import React, { PureComponent } from 'react'

import LoadingIndicator from '../LoadingIndicator'

import constants from '../../constants.json'

class UserQuestions extends PureComponent {
  constructor (props) {
    super(props)

    this.state = {
      loaded: false
    }

    console.info('Fetching qa.json')
    fetch(`${constants.serverUrl}qa.json`) // eslint-disable-line
      .then((resp) => {
        return resp.json()
      })
      .then((data) => {
        this.qa = data

        this.setState({
          loaded: true
        })
      })
  }

  render () {
    const { loaded } = this.state

    if (loaded) {
      let questions = Object.keys(this.qa).map((key, i) => {
        let q = this.qa[key]
        return (
          <div key={key} className='uquestioncontainer'>
            <div >
              <div className='uquestionnumber'>
                {key}:
              </div>
              <div className='uquestion'>
                {q.q}
              </div>
            </div>
            <div className='uanswer'>
              {q.a}
            </div>
          </div>
        )
      }).reverse()

      return (
        <div className='uquestionscontainer'>
          {questions}
        </div>
      )
    } else {
      return (
        <LoadingIndicator />
      )
    }
  }
}

export default UserQuestions