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

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

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

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

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.dark_blue,
    flex: 1
  },
  safearea: {
    flex: 1,
    marginTop: 0,
    justifyContent: "space-between",
    paddingHorizontal: 10
  },
  headerContainer: {
    marginTop: -40,
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    height: screen.width/1.5
  },
  header: {
    width: "100%"
  },
  button: {
    position: "absolute",
    bottom: 40,
    left: 40,
    width: screen.width-80
  },
  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: 10
  },
  title: {
    paddingTop: 30,
    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: 10
  },
  textSmall: {
    lineHeight: 23,
    marginTop: 15,
    borderRadius: 5,
    backgroundColor: colors.black_alpha,
    borderWidth: 0,
    borderColor: colors.white_alpha,
    fontSize: 16,
    color: colors.white,
    fontWeight: "400",
    textAlign: "center",
    paddingHorizontal: 20,
    paddingVertical: 20
  },
  textItems: {
    fontSize: 16,
    fontWeight: "400",
    lineHeight: 23,
    color: colors.white,
    textAlign: "center",
    paddingBottom: 10,
    marginBottom: 10,
    borderBottomColor: colors.black_alpha,
    borderBottomWidth: 1
  },
  noBorder: {
    borderBottomWidth: 0
  },
  item: {
    width: "100%"
  },
  noPadding: {
    paddingVertical: 0,
  },
  textLabel: {
    paddingHorizontal: 20,
    paddingVertical: 20
  },
  bold: {
    lineHeight: 30,
    fontSize: 26,
    fontWeight: "600"
  }
})

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

class Info extends React.Component {

  state = {}


  openURL = (url) => {
    Linking.openURL(url).catch((err) => console.error('An error occurred', err))
  }

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

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

  handleBackButton = () => {
    this.props.navigation.navigate("Splash")
    return true
  }

  render() {

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

        <SafeAreaView style={styles.safearea}>
          <ScrollView>
            <View  style={styles.box}>
              <Text style={styles.text}>
                <Text style={[styles.textLabel, styles.bold]}>{`${pkg.expo.name}`}</Text>
              </Text>
              <Text style={styles.text}>
                <Text style={styles.textLabel}>{`${texts.version}: ${pkg.expo.version}`}</Text>
              </Text>
              <Text style={styles.text}>
                <Text style={styles.textLabel}>{`${texts.author}: Dslak`}</Text>
              </Text>

              <Text style={styles.textSmall}>
                {texts.description}
              </Text>

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

              <View style={styles.textSmall}>
                {examScheme.map( (arg, index) => (
                  <Text style={styles.textItems} key={index}>
                    <B>{texts[arg.section]}</B>: {'\n\r'}{arg.questions} {texts.questions} / {arg.points} {texts.points}
                  </Text>
                ))}

                  <Text style={[styles.textItems, styles.noBorder]}>
                    <B>TOTALE</B>: {'\n\r'}30 {texts.questions} / 100 {texts.points}
                  </Text>
              </View>

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

              <View style={styles.textSmall}>
                {resultsScheme.map( (arg, index) => (
                  <Text style={[styles.textItems, index == resultsScheme.length-1 ? styles.noBorder : {}]} key={index}>
                    <B>{arg.points}</B>: {'\n\r'}{arg.result}
                  </Text>
                ))}
              </View>

              <Button
                text={texts.source}
                subtitle={texts.pdfLinkText}
                isBig={false}
                onPress={() => this.openURL(texts.pdfLink)}
              />
              <Text></Text>
            </View>
          </ScrollView>

        </SafeAreaView>

      </View>
    )
  }
}

export default Info