import React from "react"
import { View, ScrollView, StyleSheet, StatusBar, Text, SafeAreaView } from "react-native"

import { Button, ButtonContainer } from "../components/Button"
import { Alert } from "../components/Alert"
import { Results } from "../components/Results"
import { colors } from "../components/Variables"

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.blue,
    flex: 1,
    paddingHorizontal: 20
  },
  text: {
    color: colors.white,
    fontSize: 20,
    textAlign: "center",
    fontWeight: "600",
    paddingVertical: 20,
    marginTop: 20,
  },
  safearea: {
    flex: 1,
    marginTop: 20,
    justifyContent: "space-between"
  }
})

class Quiz extends React.Component {

  state = {
    correctCount: 0,
    wrongCount: 0,
    totalCount: this.props.navigation.getParam("questions", []).length,
    availableIds: this.props.navigation.getParam("questions", []).map(a => a.id),
    activeQuestionId: this.props.navigation.getParam("questions", [])[
                        Math.floor(Math.random() * this.props.navigation.getParam("questions", []).length)
                      ].id,
    answered: false,
    answerCorrect: false,
    results: false
  }

  answer = correct => {
    this.setState(
      state => {
        const nextState = { answered: true }

        if (correct) {
          nextState.correctCount = state.correctCount + 1
          nextState.answerCorrect = true
        } else {
          nextState.wrongCount = state.wrongCount + 1
          nextState.answerCorrect = false
        }

        return nextState
      },
      () => {
        setTimeout(() => this.nextQuestion(), 750)
      }
    )
  }

  nextQuestion = () => {
    this.setState( (state) => {
      const updatedIndexes = state.availableIds.filter( item => item != state.activeQuestionId)
      const nextId = updatedIndexes[Math.floor(Math.random() * updatedIndexes.length)]
      let resultsShow = false

      if (!updatedIndexes.length) {
        resultsShow = true
        setTimeout( () => {
          this.props.navigation.popToTop()
        }, 5000)
      }

      return {
        //totalCount: updatedIndexes.length,
        availableIds: updatedIndexes,
        activeQuestionId: nextId,
        answered: false,
        results: resultsShow
      }
    })
  }

  render() {
    const questions = this.props.navigation.getParam("questions", [])
    const question = questions.filter(item => item.id == this.state.activeQuestionId)[0] || questions[0]

    return (
      <ScrollView style={[
          styles.container,
          { backgroundColor: this.props.navigation.getParam("color") }
        ]}
      >
        <StatusBar barStyle="light-content" />
        <SafeAreaView style={styles.safearea}>
          <View>
            <Text style={styles.text}>{question.question}</Text>

            <ButtonContainer>
              {question.answers.map(answer => (
                <Button
                  key={answer.id}
                  text={answer.text}
                  onPress={() => this.answer(answer.correct)}
                />
              ))}
            </ButtonContainer>
          </View>

          <Text style={styles.text}>
            {`${this.state.correctCount+this.state.wrongCount}/${this.state.totalCount}`}
          </Text>
        </SafeAreaView>
        <Alert
          correct={this.state.answerCorrect}
          visible={this.state.answered}
        />
        <Results
          correct={this.state.correctCount}
          wrong={this.state.wrongCount}
          visible={this.state.results}
        />
      </ScrollView>
    )
  }
}

export default Quiz