import React from "react"
import { View, ScrollView, StyleSheet, StatusBar, Text, CheckBox, Switch, Dimensions, Image, ImageBackground, BackHandler } from "react-native"
import SafeAreaView from 'react-native-safe-area-view'
import AsyncStorage from '@react-native-async-storage/async-storage'

import { Button, ButtonContainer } from "../components/Button"
import { colors, texts, examScheme, resultsScheme} 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 allQuestions = {
  aerodynamics: aerodynamicsQuestions,
  firstAid: firstAidQuestions,
  flightSafety: flightSafetyQuestions,
  instruments: instrumentsQuestions,
  legislation: legislationQuestions,
  materials: materialsQuestions,
  meteorology: meteorologyQuestions,
  physiopathology: physiopathologyQuestions,
  pilotingTechniques: pilotingTechniquesQuestions
}

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

const pkg = require('../../app.json')

const styles = StyleSheet.create({
  container: {
    //backgroundColor: colors.dark_blue,
    flex: 1
  },
  safearea: {
    flex: 1,
    marginTop: 25,
    justifyContent: "space-between",
    paddingHorizontal: 10
  },
  bg: {
    width: "100%",
    height: "100%"
  },
  box: {
    width: screen.width-20,
    paddingHorizontal: 10
  },
  text: {
    color: colors.white,
    fontSize: 16,
    textAlign: "center",
    fontWeight: "400",
    lineHeight: 20,
    textShadowColor: 'rgba(0, 0, 0, 0.75)',
    textShadowOffset: {width: -1, height: 1},
    textShadowRadius: 5
  },
  title: {
    paddingTop: 40,
    paddingBottom: 20,
    color: colors.white,
    fontSize: 18,
    textTransform: "uppercase",
    textAlign: "center",
    fontWeight: "400",
    lineHeight: 20,
    textShadowColor: 'rgba(0, 0, 0, 0.75)',
    textShadowOffset: {width: -1, height: 1},
    textShadowRadius: 5
  },
  textSmall: {
    lineHeight: 23,
    marginTop: 15,
    borderRadius: 10,
    backgroundColor: colors.white,
    borderWidth: 0,
    borderColor: colors.white_alpha,
    fontSize: 16,
    color: colors.white,
    fontWeight: "400",
    textAlign: "center",
    paddingHorizontal: 20,
    paddingVertical: 20,
    textShadowColor: 'rgba(0, 0, 0, 0.75)',
    textShadowOffset: {width: -1, height: 1},
    textShadowRadius: 5
  },
  textItems: {
    fontSize: 16,
    fontWeight: "400",
    lineHeight: 23,
    color: colors.white,
    textAlign: "center",
    paddingBottom: 10,
    marginBottom: 10,
    borderBottomColor: colors.white_alpha,
    borderBottomWidth: 1,
    textShadowColor: 'rgba(0, 0, 0, 0.55)',
    textShadowOffset: {width: -1, height: 1},
    textShadowRadius: 2
  },
  noBorder: {
    borderBottomWidth: 0
  },
  item: {
    width: "100%"
  },
  noPadding: {
    paddingVertical: 0,
  },
  textLabel: {
    paddingHorizontal: 20,
    paddingVertical: 20
  },
  bold: {
    lineHeight: 30,
    fontSize: 26,
    fontWeight: "600"
  },

  switchContainer: {
    flexDirection: "row",
    paddingBottom: 10,
    marginBottom: 10,
    borderBottomColor: colors.black_alpha,
    borderBottomWidth: 1,
  },
  switch: {
    alignSelf: "flex-start",
    color: "white",
    marginRight: 0,
    marginLeft: "auto"
  },
  switchLabel: {
    fontSize: 16,
    fontWeight: "600",
    marginLeft: 8,
    marginRight: 8,
    width: "75%"
  },
  button: {
    marginTop: 20
  }
})

const B = (props) => <Text style={{fontWeight: 'bold'}}>{props.children}</Text>

class Setup extends React.Component {

  state = {
    setupData: {}
  }

  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton)
    AsyncStorage.getItem('setupData').then((value) => {
      let setupData = {}

      if(!value) {
        setupData = {
          randomQuestions: true,
          excludeDelta: true
        }
        AsyncStorage.setItem('setupData', JSON.stringify(setupData))
      } else {
        setupData = JSON.parse(value)
      }

      this.setState( (state) => {
        return {
          setupData: setupData
        }
      })
    })//.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
      })

      return true

    })//.done()

  }

  changeSetup = (item) => {
    let setupData = this.state.setupData
    setupData[item] = !this.state.setupData[item]

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

    AsyncStorage.setItem('setupData', JSON.stringify(setupData))
  }

  render() {

    return (
      <ImageBackground source={bgImage} style={styles.bg} resizeMode="cover">
        <View style={styles.container} >

          <SafeAreaView style={styles.safearea}>
            <ScrollView>
              <View style={styles.box}>

                <Text style={styles.title}>
                  {texts.setupScheme}
                </Text>

                <View style={styles.textSmall}>

                  <View style={styles.switchContainer}>
                    <Text style={styles.switchLabel}>{texts.setupRandomCheck}</Text>
                    <Switch
                      value={this.state.setupData.randomQuestions}
                      onValueChange={() => this.changeSetup('randomQuestions')}
                      style={styles.switch}
                    />
                  </View>

                  <View style={[styles.switchContainer, styles.noBorder]}>
                    <Text style={styles.switchLabel}>{texts.setupExcludeDelta}</Text>
                    <Switch
                      value={this.state.setupData.excludeDelta}
                      onValueChange={() => this.changeSetup('excludeDelta')}
                      style={styles.switch}
                    />
                  </View>


                </View>
                <View style={styles.button}>
                  <Button
                    color={colors.white_alpha2}
                    hasShadow={true}
                    hasBg={true}
                    text={texts.save}
                    onPress={() => {this.handleBackButton()}
                    }
                  />
                </View>
              </View>
            </ScrollView>

          </SafeAreaView>

        </View>
      </ImageBackground>
    )
  }
}

export default Setup