import React from "react"
import { View, ScrollView, StyleSheet, StatusBar, Text, Dimensions, ImageBackground, BackHandler, Linking} 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, credentials} from "../components/Variables"
import { abbreviations, alphabeth, numbers} from "../data/dictionary"

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

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  safearea: {
    flex: 1,
    marginTop: 30,
    justifyContent: "space-between",
    paddingHorizontal: 20
  },

  buttonContainer: {
    marginHorizontal: 0,
    marginBottom: 20
  },

  text: {
    color: colors.black,
    fontSize: 16,
    textAlign: "left",
    fontWeight: "400",
    lineHeight: 20,
    textShadowColor: 'rgba(0, 0, 0, 0.75)',
    textShadowOffset: {width: -1, height: 1},
    textShadowRadius: 10
  },
  title: {
    paddingTop: 30,
    color: colors.black,
    fontSize: 18,
    textTransform: "uppercase",
    textAlign: "left",
    fontWeight: "400",
    lineHeight: 20,
    textShadowColor: 'rgba(0, 0, 0, 0.75)',
    textShadowOffset: {width: -1, height: 1},
    textShadowRadius: 10
  },
  textBig: {
    color: colors.white,
    fontSize: 24,
    textAlign: "center",
    fontWeight: "400",
    paddingBottom: 10,
    textShadowColor: 'rgba(0, 0, 0, 0.75)',
    textShadowOffset: {width: -1, height: 1},
    textShadowRadius: 10
  },
  textSmall: {
    lineHeight: 23,
    marginTop: 15,
    borderRadius: 5,
    borderWidth: 0,
    borderColor: colors.white_alpha,
    fontSize: 16,
    color: colors.white,
    fontWeight: "400",
    textAlign: "center",
    paddingVertical: 20
  },
  textItems: {
    fontSize: 16,
    fontWeight: "400",
    lineHeight: 23,
    color: colors.black,
    textAlign: "left",
    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"
  },
  box: {
    width: screen.width-40,
    paddingHorizontal: 20,
    paddingVertical: 10,
    backgroundColor: colors.white,
    borderRadius: 10,
    overflow: "hidden"
  },
  scrollView: {
    margin: 10,
    height: screen.height-400
  },
  bg: {
    width: "100%",
    height: "100%"
  },
  bannerContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  }
})

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

class Dictionary extends React.Component {

  state = {
    title: texts.alphabethTitle,
    items: alphabeth,//numbers
  }

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

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

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

  switchData = (section) => {

    let newState = {}

    switch(section) {
      case 'abbreviations':
        newState = {
          title: texts.abbreviationsTitle,
          items: abbreviations
        }
      break;
      case 'alphabeth':
        newState = {
          title: texts.alphabethTitle,
          items: alphabeth
        }
      break;
      case 'numbers':
        newState = {
          title: texts.numbersTitle,
          items: numbers
        }
      break;
    }

    this.setState( (state) => {
      return newState
    })
  }

  render() {

    return (
      <ImageBackground source={bgImage} style={styles.bg} resizeMode="cover">
      <View style={styles.container} >
        <SafeAreaView style={styles.safearea}>
          <View style={styles.buttonContainer}>
            <ButtonContainer isBoxed={true}>
              <Button
                noPadding={true}
                text={texts.alphabethTitle}
                color={this.state.title == texts.alphabethTitle ? colors.white_alpha : colors.black_alpha}
                onPress={() => this.switchData('alphabeth')}
              />
              <Button
                noPadding={true}
                text={texts.numbersTitle}
                color={this.state.title == texts.numbersTitle ? colors.white_alpha : colors.black_alpha}
                onPress={() => this.switchData('numbers')}
              />
              <Button
                noPadding={true}
                noBorder={true}
                text={texts.abbreviationsTitle}
                color={this.state.title == texts.abbreviationsTitle ? colors.white_alpha : colors.black_alpha}
                onPress={() => this.switchData('abbreviations')}
              />
            </ButtonContainer>
          </View>

          <View style={styles.box}>
            <View style={styles.scrollView}>
              <ScrollView>

                  <View style={styles.textSmall}>
                    {this.state.items.map( (arg, index) => (
                      <Text style={[styles.textItems, index == this.state.items.length-1 ? styles.noBorder : {}]} key={index}>
                        <B>{arg.k}</B>: {arg.v}
                      </Text>
                    ))}
                  </View>

                  <Text></Text>
              </ScrollView>
            </View>
          </View>
          <View style={styles.bannerContainer}>
            <Banner />
          </View>
        </SafeAreaView>
      </View>
      </ImageBackground>
    )
  }
}

export default Dictionary