import React, { Component, Fragment } from "react";
import { View, Button, StyleSheet, AsyncStorage, Image } from "react-native";

import LoginForm from "./LoginForm";
import RegisterForm from "./RegisterForm";
import GameList from "./GameList";

class Login extends Component {
  state = {
    form: "login", // Used for forms (login, register etc.)
    username: null,
    token: null
  };
  // Toggling the register and login forms visibility
  toggleView = view => {
    this.setState({
      form: view
    });
  };

  // Storing the username and token when logging in
  handleState = async data => {
    await AsyncStorage.setItem("name", data.name);
    await AsyncStorage.setItem("token", data.token);
    await this.setState({ username: data.name, token: data.token });
  };

  // When logging out, removing the token from the storage
  handleLogout = async () => {
    await this.setState({ username: null, token: null });
    await AsyncStorage.removeItem("token");
    this.toggleView("login");
  };

  loadToken = async () => {
    let token = await AsyncStorage.getItem("token");
    return token;
  };

  // verifies the token (if it exists) on element mount with backend server
  componentDidMount() {
    let token = this.loadToken();
    if (token) {
      fetch("https:/tacs-testing.cf:8443/user/verify", {
        headers: {
          Authorization: "Bearer " + token
        }
      })
        .then(res => res.json())
        .then(
          result => {
            // if token is still valid, login user
            if (result === true) {
              this.setState({
                username: AsyncStorage.getItem("name"),
                token: token
              });
              // logout user if token has expired / is invalid
            } else {
              this.handleLogout();
            }
          },
          error => {
            console.log(error);
          }
        );
    }
  }

  render() {
    return (
      <View className="container">
        <View className="navigation">
          {this.state.form === "register" && (
            <RegisterForm
              view=""
              handleState={this.handleState.bind(this)}
              toggleView={this.toggleView.bind(this)}
            />
          )}
          {this.state.form === "login" && (
            <LoginForm
              view=""
              handleState={this.handleState.bind(this)}
              toggleView={this.toggleView.bind(this)}
            />
          )}

          {!this.state.username && this.state.form === "login" && (
            <View style={styles.buttonContainer}>
              <Button
                color="#424242"
                id="registerButton"
                onPress={() => this.toggleView("register")}
                title="Register"
              />
            </View>
          )}
          {!this.state.username && this.state.form === "register" && (
            <View style={styles.buttonContainer}>
              <Button
                color="#424242"
                id="loginButton"
                onPress={() => this.toggleView("login")}
                title="Login"
              />
            </View>
          )}
          {this.state.username && (
            <Fragment>
              <View style={styles.buttonContainer}>
                <Button
                  color="#424242"
                  id="logoutButton"
                  onPress={this.handleLogout.bind(this)}
                  title="Logout"
                />
              </View>
              <GameList token={this.state.token} />
            </Fragment>
          )}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  buttonContainer: {
    padding: 5
  },
  logo: {
    alignContent: "center",
    alignItems: "center",
    justifyContent: "center"
  }
});

export default Login;