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

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

const screen = Dimensions.get("window")
const logo = require("../assets/logo.png")

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.blue,
    flex: 1,
    paddingHorizontal: 20
  },
  title: {
    color: colors.white,
    fontSize: 25,
    textAlign: "center",
    fontWeight: "600",
    paddingVertical: 20
  },
  text: {
    color: colors.white,
    fontSize: 20,
    textAlign: "center",
    fontWeight: "400",
    paddingVertical: 20,
    marginTop: 20,
  },
  safearea: {
    flex: 1,
    marginTop: 10,
    justifyContent: "space-between"
  },
  logoContainer: {
    marginTop: 50,
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    height: 150
  },
  logo: {
    width: 150
  }
})

class Splash extends React.Component {

  state = {
    results: false
  }


  render() {

    return (
      <View style={styles.container} >
        <View style={styles.logoContainer} >
          <Image source={logo} style={styles.logo} resizeMode="contain" />
        </View>

        <SafeAreaView style={styles.safearea}>
          <View>
            <ButtonContainer>
              <Button
                text={texts.section_quizzes}
                isBig={true}
                onPress={() =>
                  this.props.navigation.navigate("QuizIndex", {
                    title: texts.section_quizzes,
                    color: colors.blue
                  })}
              />

              <Button
                text={texts.exam}
                subtitle={`(${texts.exam_simulation})`}
                isBig={true}
                onPress={() =>
                  this.props.navigation.navigate("Exam", {
                    title: texts.exam,
                    questions: examQuestions,
                    color: colors.blue
                  })}
              />


            </ButtonContainer>

          </View>

        </SafeAreaView>

      </View>
    )
  }
}

export default Splash