import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { firebaseConnect } from 'react-redux-firebase'
import { path } from 'ramda'
import preloadImages from 'utils/preloadImages'
// Component
import Question from './components/Question/Question'
import styles from './Numbers.scss'
import { NUMBERS_QUESTIONS_PATH } from 'consts/firebasePaths'


@firebaseConnect()
class Numbers extends Component {
  static propTypes = {
    firebase: PropTypes.object,
    play: PropTypes.object,
    tour: PropTypes.object,
    tourKey: PropTypes.string,
  }

  componentDidMount() {
    const { tour } = this.props
    const questions = path(['questions'], tour) || {}
    Object.keys(questions).forEach(async questionKey => {
      preloadImages(this.props.firebase, `${NUMBERS_QUESTIONS_PATH}/${questionKey}`, [['image']])
    })
  }

  render() {
    const { play } = this.props
    const currentTourKey = path(['currentTourKey'], play)
    const currentQuestionKey = path(['tours', currentTourKey, 'currentQuestionKey'], play)

    return (
      <div>
        {currentQuestionKey &&
        <Question
          questionKey={currentQuestionKey}
          play={play}
        />}
        {!currentQuestionKey &&
        <div className={styles.intro}>
          <div>
            <h1>Нумерология</h1>
            <p>Ответом на вопрос является число</p>
            <p>Чем ближе к правильному ответу - тем больше очков</p>
            <p>30 секунд на вопрос</p>
          </div>
        </div>}
      </div>
    )
  }
}

export default Numbers
