import React, { Component } from 'react'
import { Text, View, StyleSheet, TouchableOpacity, Image } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Loading from "./Loading";

// Stylesheetit

const styles = StyleSheet.create({
  home: {
    flex: 1,
    backgroundColor: '#7eb67b',
    justifyContent: 'center',
    alignItems: 'center',
  },
      welcome: {
        flex: 1,
        backgroundColor: '#fff',
        justifyContent: 'center',
        alignItems: 'center',
      },
        notes: {
          flex: 1,
          backgroundColor: '#ffaa00',
          justifyContent: 'center',
          alignItems: 'center',
        },
        bookmarks: {
          flex: 1,
          backgroundColor: '#967bb6',
          justifyContent: 'center',
          alignItems: 'center',
      },
  title: {
    color: '#fff',
    fontSize: 30,
    marginBottom: 20,
  },
      welcomeTitle: {
        color: '#5f5f5f',
        fontSize: 30,
        marginBottom: 20,
        bottom: 80,
        fontWeight: 'bold',
      },
        notesTitle: {
          color: '#fff',
          fontSize: 30,
          marginBottom: 20,
          bottom: 300,
        },
          toDoTitle: {
            color: '#fff',
            fontSize: 30,
            marginBottom: 20,
            bottom: 300,
          },
  main: {
    alignItems: 'center',
  },
  btn: {
    backgroundColor: '#fff',
    borderRadius: 10,
    padding: 10,
    paddingLeft: 20,
    paddingRight: 20,
    top: -5,
  },
  btn2:{
    backgroundColor: '#fff',
    borderRadius: 10,
    padding: 10,
    paddingLeft: 20,
    paddingRight: 20,
    top: 20,
  },
  welcomeBtn1Text: {
    color: '#fff',
    fontSize: 30,
    textAlign: 'center',
  },
  welcomeBtn2Text: {
    color: '#fff',
    fontSize: 30,
    textAlign: 'center',
  },
  welcomeBtn1:{
    backgroundColor: '#ffaa00',
    borderRadius: 10,
    padding: 80,
    paddingLeft: 110,
    paddingRight: 110,
    top: 60,
  },
  welcomeBtn2:{
    backgroundColor: '#967bb6',
    borderRadius: 10,
    padding: 80,
    paddingLeft: 110,
    paddingRight: 110,
    top: 80,
  }
});

// Sivut

              class HomeScreen extends Component {
                state = {
                  loaded: false,
                }
                constructor(){
                  super();
                  Loading.load(v => this.setState({loaded: true}));
                }
                static navigationOptions = ({ navigation }) => {
                  return {
                     header: () => null
                  }
              }
                render(){
                  return (
                    <View style={styles.home}>
                      {this.state.loaded ?
                                <View style={styles.main}>
                                  <Text style={styles.title}>App</Text>
                                  <TouchableOpacity
                                    onPress={() => this.props.navigation.navigate("Welcome")}
                                    style={styles.btn}
                                  >
                                    <Text style={styles.btnText}>Login</Text>
                                  </TouchableOpacity>
                                  <TouchableOpacity
                                    onPress={() => this.props.navigation.navigate("Welcome")}
                                    style={styles.btn2}
                                  >
                                    <Text style={styles.btnText}>Sign Up</Text>
                                  </TouchableOpacity>
                                </View>
                      :  <Image
                      source={require('./images/loading_gif.gif')}
                      style={{width: 100, height: 100 }}
                        />}
                  </View>
                    );
                  }
              }

                                      class WelcomeScreen extends Component {
                                        static navigationOptions = ({ navigation }) => {
                                          return {
                                             header: () => null
                                          }
                                      };
                                        render() {
                                          return (
                                            <View style={styles.welcome}>
                                              <Text style={styles.welcomeTitle}>Notepadd</Text>
                                                          <View>
                                                          <TouchableOpacity
                                                            onPress={() => this.props.navigation.navigate("Notes")}
                                                            style={styles.welcomeBtn1}
                                                          >
                                                            <Text style={styles.welcomeBtn1Text}>Notes</Text>
                                                          </TouchableOpacity>
                                                          <TouchableOpacity
                                                            onPress={() => this.props.navigation.navigate("ToDo")}
                                                            style={styles.welcomeBtn2}
                                                          >
                                                            <Text style={styles.welcomeBtn2Text}>Bookmarks</Text>
                                                          </TouchableOpacity>
                                                        </View>
                                            </View>
                                          );
                                          }
                                      }

                                      class NotesScreen extends Component {
                                        static navigationOptions = ({ navigation }) => {
                                          return {
                                             header: () => null
                                          }
                                      };
                                        render() {
                                          return (
                                            <View style={styles.notes}>
                                              <Text style={styles.notesTitle}>Notes</Text>
                                            </View>
                                          );
                                          }
                                      }

                                      class ToDoScreen extends Component {
                                        static navigationOptions = ({ navigation }) => {
                                          return {
                                             header: () => null
                                          }
                                      };
                                        render() {
                                          return (
                                            <View style={styles.bookmarks}>
                                              <Text style={styles.toDoTitle}>To Do</Text>
                                            </View>
                                          );
                                          }
                                      }


// Variablet

              const RootStack = createStackNavigator(
                {
                  Home: HomeScreen,
                  Welcome: WelcomeScreen,
                  Notes: NotesScreen,
                  ToDo: ToDoScreen,
                },
                {initialRouteName: "Home",
              },
              );

              const AppContainer = createAppContainer(RootStack);

export default AppContainer