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

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

class Login extends Component {
  state = {
    form: "", // Popup form (login, register etc.)
    username: null,
    token: null
  };
  toggleView = view => {
    this.setState({
      form: view
    });
  };
  handleState = async data => {
    await AsyncStorage.setItem("name", data.name);
    await AsyncStorage.setItem("token", data.token);
    await this.setState({ username: data.name, token: data.token });
  };

  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(`${process.env.REACT_APP_URL}/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>
        <View className="header">
          {!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 && (
            <button
              id="logoutButton"
              onPress={this.handleLogout}
              title="Logout"
            />
          )}
        </View>
        {this.state.form === "register" && (
          <RegisterForm
            view=""
            handleState={this.handleState}
            toggleView={this.toggleView}
          />
        )}
        {this.state.form === "login" && (
          <LoginForm
            view=""
            handleState={this.handleState}
            toggleView={this.toggleView}
          />
        )}
      </View>
    );
  }
}

export default Login;