import React from "react"
import { View, ScrollView, StatusBar, BackHandler, StyleSheet, Dimensions, ImageBackground } from "react-native"
import AsyncStorage from '@react-native-async-storage/async-storage'

import aerodynamicsQuestions from "../data/aerodynamics"
import firstAidQuestions from "../data/firstAid"
import flightSafetyQuestions from "../data/flightSafety"
import instrumentsQuestions from "../data/instruments"
import legislationQuestions from "../data/legislation"
import materialsQuestions from "../data/materials"
import meteorologyQuestions from "../data/meteorology"
import physiopathologyQuestions from "../data/physiopathology"
import pilotingTechniquesQuestions from "../data/pilotingTechniques"
import testQuestions from "../data/test"

import { Button, ButtonContainer } from "../components/Button"
import { RowItem } from "../components/RowItem"
import { colors, texts} from "../components/Variables"

const bgImage = require("../assets/bg.jpg")
const screen = Dimensions.get("window")

const styles = StyleSheet.create({

  bg: {
    flex: 1,
    width: "100%",
    height: "100%"
  },
})

/*
    <RowItem name="TEST" textColor={colors.white} onPress={()=>
      this.props.navigation.navigate("Quiz", {
        title: "TEST",
        questions: testQuestions,
        color: colors.blue
      })}/>
*/

class QuizIndex extends React.Component {

  state = {
    storeWrongAnswers: [],
    randomQuestions: true,
    excludeDelta: true
  }

  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton)
    AsyncStorage.getItem('storeWrongAnswers').then((value) => {
      this.setState( (state) => {
        return {
          storeWrongAnswers: JSON.parse(value)
        }
      })
    })

    AsyncStorage.getItem('setupData').then((value) => {
      this.setState( (state) => {
        return {
          randomQuestions: JSON.parse(value).randomQuestions,
          excludeDelta: JSON.parse(value).excludeDelta
        }
      })
    })
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton)
  }

  handleBackButton = () => {
    this.props.navigation.navigate("Splash")
    return true
  }

  render() {
    return (
      <ImageBackground source={bgImage} style={styles.bg} resizeMode="cover">
        <ScrollView >
          <View style={{marginVertical: 60}}>

            <RowItem name={texts.aerodynamics} subtitle={this.state.excludeDelta ? aerodynamicsQuestions.filter(item => !item.delta).length : aerodynamicsQuestions.length}
              textColor={colors.white} onPress={()=>
                this.props.navigation.navigate("Quiz", {
                  title: texts.aerodynamics,
                  questions: this.state.excludeDelta ? aerodynamicsQuestions.filter(item => !item.delta) : aerodynamicsQuestions,
                  randomQuestions: this.state.randomQuestions,
                  color: colors.blue
                })
              }/>

            <RowItem name={texts.first_aid} subtitle={this.state.excludeDelta ? firstAidQuestions.filter(item => !item.delta).length : firstAidQuestions.length}
              textColor={colors.white} onPress={()=>
                this.props.navigation.navigate("Quiz", {
                  title: texts.first_aid,
                  questions: this.state.excludeDelta ? firstAidQuestions.filter(item => !item.delta) : firstAidQuestions,
                  randomQuestions: this.state.randomQuestions,
                  color: colors.blue
                })
              }/>

            <RowItem name={texts.flight_safety} subtitle={this.state.excludeDelta ? flightSafetyQuestions.filter(item => !item.delta).length : flightSafetyQuestions.length}
              textColor={colors.white} onPress={()=>
                this.props.navigation.navigate("Quiz", {
                  title: texts.flight_safety,
                  questions: this.state.excludeDelta ? flightSafetyQuestions.filter(item => !item.delta) : flightSafetyQuestions,
                  randomQuestions: this.state.randomQuestions,
                  color: colors.blue
                })
              }/>

            <RowItem name={texts.instruments} subtitle={this.state.excludeDelta ? instrumentsQuestions.filter(item => !item.delta).length : instrumentsQuestions.length}
              textColor={colors.white} onPress={()=>
                this.props.navigation.navigate("Quiz", {
                  title: texts.instruments,
                  questions: this.state.excludeDelta ? instrumentsQuestions.filter(item => !item.delta) : instrumentsQuestions,
                  randomQuestions: this.state.randomQuestions,
                  color: colors.blue
                })
              }/>

            <RowItem name={texts.legislation} subtitle={this.state.excludeDelta ? legislationQuestions.filter(item => !item.delta).length : legislationQuestions.length}
              textColor={colors.white} onPress={()=>
                this.props.navigation.navigate("Quiz", {
                  title: texts.legislation,
                  questions: this.state.excludeDelta ? legislationQuestions.filter(item => !item.delta) : legislationQuestions,
                  randomQuestions: this.state.randomQuestions,
                  color: colors.blue
                })
              }/>

            <RowItem name={texts.materials} subtitle={this.state.excludeDelta ? materialsQuestions.filter(item => !item.delta).length : materialsQuestions.length}
              textColor={colors.white} onPress={()=>
                this.props.navigation.navigate("Quiz", {
                  title: texts.materials,
                  questions: this.state.excludeDelta ? materialsQuestions.filter(item => !item.delta) : materialsQuestions,
                  randomQuestions: this.state.randomQuestions,
                  color: colors.blue
                })
              }/>

            <RowItem name={texts.meteorology} subtitle={this.state.excludeDelta ? meteorologyQuestions.filter(item => !item.delta).length : meteorologyQuestions.length}
              textColor={colors.white} onPress={()=>
                this.props.navigation.navigate("Quiz", {
                  title: texts.meteorology,
                  questions: this.state.excludeDelta ? meteorologyQuestions.filter(item => !item.delta) : meteorologyQuestions,
                  randomQuestions: this.state.randomQuestions,
                  color: colors.blue
                })
              }/>

            <RowItem name={texts.physiopathology} subtitle={this.state.excludeDelta ? physiopathologyQuestions.filter(item => !item.delta).length : physiopathologyQuestions.length}
              textColor={colors.white} onPress={()=>
                this.props.navigation.navigate("Quiz", {
                  title: texts.physiopathology,
                  questions: this.state.excludeDelta ? physiopathologyQuestions.filter(item => !item.delta) : physiopathologyQuestions,
                  randomQuestions: this.state.randomQuestions,
                  color: colors.blue
                })
              }/>

            <RowItem name={texts.piloting_techniques} subtitle={this.state.excludeDelta ? pilotingTechniquesQuestions.filter(item => !item.delta).length : pilotingTechniquesQuestions.length}
              textColor={colors.white} onPress={()=>
                this.props.navigation.navigate("Quiz", {
                  title: texts.piloting_techniques,
                  questions: this.state.excludeDelta ? pilotingTechniquesQuestions.filter(item => !item.delta) : pilotingTechniquesQuestions,
                  randomQuestions: this.state.randomQuestions,
                  color: colors.blue
                })
              }/>

            </View>
        </ScrollView>

      </ImageBackground>
    )
  }
}

export default QuizIndex