import React from "react";
import { View, ScrollView, StyleSheet, Text, Image, BackHandler } from "react-native";
import SafeAreaView from 'react-native-safe-area-view';

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

const header = require("../assets/header.png");

const styles = StyleSheet.create({
  container: { backgroundColor: colors.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: 200 },
  header: { width: "100%" },
  box: { marginTop: 30, borderColor: colors.black_alpha, borderWidth: 1, padding: 15, borderRadius: 5, backgroundColor: colors.white_alpha },
  text: { color: colors.white, fontSize: 20, textAlign: "center", fontWeight: "600" },
  textCode: { color: colors.white, fontSize: 12, textAlign: "center", fontWeight: "500", paddingTop: 10 },
  textBig: { color: colors.white, fontSize: 22, textAlign: "center", fontWeight: "400", paddingBottom: 15, textTransform: "uppercase", textShadowColor: 'rgba(0,0,0,0.75)', textShadowOffset: {width:-1, height:1}, textShadowRadius:10 },
  bannerContainer: { flex: 1, alignItems: "center", justifyContent: "center" }
});

class RecapTrueFalse extends React.Component {
  componentDidMount() {
    this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
  }

  componentWillUnmount() {
    this.backHandler?.remove();
  }

  handleBackButton = () => {
    const tmpQuestions = [];
    let fullQuestions = [];

    examScheme.forEach(elem => {
      fullQuestions.push(...allQuestions[elem.section]);
    });

    for (let i = 0; i < 10; i++) {
      const index = Math.floor(Math.random() * fullQuestions.length);
      tmpQuestions.push(fullQuestions[index]);
      fullQuestions.splice(index, 1);
    }

    this.props.navigation.navigate("Splash", { trueFalseQuestions: tmpQuestions });
    return true;
  }

  render() {
    const questions = this.props.route.params?.wrongAnswers || [];

    return (
      <View style={styles.container}>
        <View style={styles.headerContainer}>
          <Image source={header} style={styles.header} resizeMode="contain" />
        </View>
        <Text style={styles.textBig}>{texts.recapTitle}</Text>

        <ScrollView>
          <SafeAreaView style={styles.safearea}>
            {questions.map(q => (
              <View style={styles.box} key={q.id}>
                <Text style={styles.textCode}>{q.id}</Text>
                <Text style={styles.text}>{q.question}</Text>

                <ButtonContainer>
                  {q.answers.map(ans => (
                    q.clicked === ans.id && (
                      <Button
                        key={ans.id}
                        text={ans.text}
                        noBorder
                        colorize={{id: ans.id, clicked: q.clicked, answered: true, isCorrect: ans.correct}}
                      />
                    )
                  ))}
                </ButtonContainer>
              </View>
            ))}

            <View style={{ marginTop: 20 }}>
              <Button color={colors.white_alpha2} hasBg hasShadow text={texts.restart} onPress={this.handleBackButton} />
            </View>
          </SafeAreaView>

          <View style={styles.bannerContainer}>
            <Banner />
          </View>
        </ScrollView>
      </View>
    );
  }
}

export default RecapTrueFalse;