import React from "react"
import { View, ScrollView, StatusBar, BackHandler, StyleSheet, Dimensions, ImageBackground } from "react-native"

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 {

  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton)
  }

  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={aerodynamicsQuestions.length} textColor={colors.white} onPress={()=>
              this.props.navigation.navigate("Quiz", {
                title: texts.aerodynamics,
                questions: aerodynamicsQuestions,
                color: colors.blue
              })}/>

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

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

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

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

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

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

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

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

            </View>
        </ScrollView>

      </ImageBackground>
    )
  }
}

export default QuizIndex