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

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

class Login extends Component {
  state = {
    form: "", // 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");
  };

  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.username && (
            <Button
              id="loginButton"
              onPress={() => this.toggleView("login")}
              title="Login"
            />
          )}
          {!this.state.username && (
            <Button
              id="registerButton"
              onPress={() => this.toggleView("register")}
              title="Register"
            />
          )}
          {this.state.username && (
            <Fragment>
              <Button
                id="logoutButton"
                onPress={this.handleLogout.bind(this)}
                title="Logout"
              />
              <GameList />
            </Fragment>
          )}
        </View>
        {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)}
          />
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {}
});

export default Login;