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

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

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"

const screen = Dimensions.get("window")
const header = require("../assets/header.png")
const maxTime = 0 // 10
let interval = null

const allQuestions = {
  aerodynamics: aerodynamicsQuestions,
  firstAid: firstAidQuestions,
  flightSafety: flightSafetyQuestions,
  instruments: instrumentsQuestions,
  legislation: legislationQuestions,
  materials: materialsQuestions,
  meteorology: meteorologyQuestions,
  physiopathology: physiopathologyQuestions,
  pilotingTechniques: pilotingTechniquesQuestions
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.dark_blue,
    flex: 1
  },
  safearea: {
    flex: 1,
    marginTop: 0,
    justifyContent: "space-between",
    paddingHorizontal: 20,
    paddingBottom: 40
  },
  headerContainer: {
    marginTop: -40,
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    height: screen.width/1.5
  },
  header: {
    width: "100%"
  },
  box: {
    marginTop: 20,
    marginBottom: 20,
    marginHorizontal: 20,
    width: screen.width-80,
    borderRadius: 20,
    borderBottomEndRadius: 80,
    borderTopStartRadius: 100,
    backgroundColor: colors.white_alpha,
    borderColor: colors.white,
    borderWidth: 2,
    paddingVertical: 30
  },
  boxCorrect: {
    backgroundColor: colors.green_light,
  },
  boxWrong: {
    backgroundColor: colors.red,
  },
  boxUnsafe: {
    backgroundColor: colors.orange,
  },
  button: {
    width: screen.width-80,
    marginHorizontal: 20
  },
  text: {
    color: colors.white,
    fontSize: 22,
    textAlign: "center",
    fontWeight: "400",
    lineHeight: 40,
    textShadowColor: 'rgba(0, 0, 0, 0.75)',
    textShadowOffset: {width: -1, height: 1},
    textShadowRadius: 10
  },
  textSmall: {
    color: colors.white,
    marginTop: 20,
    fontSize: 26,
    textAlign: "center",
    fontWeight: "500",
    lineHeight: 30,
    textShadowColor: 'rgba(0, 0, 0, 0.75)',
    textShadowOffset: {width: -1, height: 1},
    textShadowRadius: 10
  },
  textLabel: {
    paddingHorizontal: 20,
    paddingVertical: 20
  },
  correct: {
    color: colors.green
  },
  wrong: {
    color: colors.red
  },
  unsafe: {
    color: colors.yellow
  }
})

class Results extends React.Component {

  state = {
    bannerExpanded: true,
    timer: maxTime,
    storeWrongAnswers: []
  }

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

    AsyncStorage.getItem('storeWrongAnswers').then( (value) => {
      const currentResults = this.props.navigation.getParam("results")
      const wrongAnswers = currentResults.wrongAnswers || []
      const stored = JSON.parse(value) || []
      const result = currentResults.isWrong ? wrongAnswers : Object.assign([], wrongAnswers, stored);
      AsyncStorage.setItem('storeWrongAnswers', JSON.stringify(result))

      this.setState( (state) => {
        return {
          storeWrongAnswers: result
        }
      })

    }).done()
  }

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

  handleBackButton = () => {

    let tmpQuestions = []
    AsyncStorage.getItem('setupData').then((value) => {
      let setupData = JSON.parse(value)

      examScheme.forEach( (elem) => {
        let currentSection = setupData.excludeDelta ? allQuestions[elem.section].filter(item => !item.delta) : allQuestions[elem.section]
        for(let i=0; i<elem.questions; i++) {
          const currentIndex = Math.floor(Math.random() * currentSection.length)
          tmpQuestions.push(currentSection[currentIndex])
          currentSection = currentSection.filter( (item, index) => index != currentIndex)
        }
      })

      this.props.navigation.navigate("Splash", {
        examQuestions: tmpQuestions,
        storeWrongAnswers: this.state.storeWrongAnswers
      })

      return true

    }).done()
  }


  render() {

    const currentResults = this.props.navigation.getParam("results")
    const wrongAnswers = currentResults.wrongAnswers || null
    const percentage = currentResults.total ? (100/currentResults.total) * currentResults.correct : 0
    let resultStyle = ''//currentResults.points >= 80 ? currentResults.points >= 85 ? styles.correct : styles.unsafe : styles.wrong
    let boxStyle = currentResults.points >= 80 ? currentResults.points >= 85 ? styles.boxCorrect : styles.boxUnsafe : styles.boxWrong

    if(!currentResults.isExam) {
      resultStyle = ''//percentage >= 80 ? percentage >= 85 ? styles.correct : styles.unsafe : styles.wrong
      boxStyle = percentage >= 80 ? percentage >= 85 ? styles.boxCorrect : styles.boxUnsafe : styles.boxWrong
    }


    return (
      <View style={styles.container} >
        <View style={styles.headerContainer} >
          <Image source={header} style={styles.header} resizeMode="contain" />
        </View>
        <ScrollView>
          <SafeAreaView style={styles.safearea}>
            <View style={[styles.box, boxStyle]}>
              <Text style={styles.text}>
                <Text style={styles.textLabel}>{`${texts.corrects}: ${currentResults.correct}`}</Text>
              </Text>
              <Text style={styles.text}>
                <Text style={styles.textLabel}>{`${texts.wrongs}: ${currentResults.wrong}`}</Text>
              </Text>
              <Text style={styles.text}>
                <Text style={styles.textLabel}>{`${texts.percentage}: ${Math.round(percentage)}%`}</Text>
              </Text>
              {
                currentResults.points ? (
                  <Text style={styles.text}>
                    <Text style={styles.textLabel}>{`${texts.points}: ${currentResults.points}/${currentResults.totalPoints}`}</Text>
                  </Text>
                ) : null
              }

              {currentResults.isExam ?
                <Text style={[styles.textSmall, resultStyle]}>
                  {currentResults.points >= 80 ? currentResults.points >= 85 ? texts.exam_passed : texts.exam_needs_oral : texts.exam_not_passed}
                </Text> : <Text/>
              }
            </View>

            {wrongAnswers.length ?
              <View style={styles.button}>
                <Button
                  color={colors.red_light}
                  text={texts.recap}
                  hasBg={true}
                  onPress={ ()=> {
                    this.props.navigation.navigate("Recap", {
                      wrongAnswers: wrongAnswers
                    })
                  }}/>
                <Button
                  isBig={false}
                  hasBg={true}
                  color={colors.white_alpha}
                  text={texts.restart}
                  onPress={() => {this.handleBackButton()}
                  }
                />

              </View> :
              <View style={styles.button}>
                <Button
                  isBig={false}
                  hasBg={true}
                  color={colors.white_alpha}
                  text={texts.restart}
                  onPress={() => {this.handleBackButton()}
                  }
                />
              </View>
            }

          </SafeAreaView>
        </ScrollView>

      </View>
    )
  }
}

export default Results