import React from "react"
import { View, StyleSheet, StatusBar, Text, SafeAreaView, Dimensions, Image } from "react-native"
import { AdMobBanner, AdMobInterstitial, PublisherBanner, AdMobRewarded } from "expo-ads-admob"

import { Button, ButtonContainer } from "../components/Button"
import { colors, texts, credentials } 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
  },
  bannerContainer: {
    backgroundColor: colors.white,
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  banner: {
    width: 300,
    height: 250,
    marginVertical: 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
  }

  bannerError = (e) => {
    console.log("Banner error: ", e)
  }


  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 style={styles.bannerContainer}>
          <AdMobBanner
            style={styles.banner}
            bannerSize="mediumRectangle"
            adUnitID={credentials.adMobUnitID}
            onDidFailToReceiveAdWithError={this.bannerError} />
        </View>
      </View>
    )
  }
}

export default Splash