import React from "react";
import { Switch, Route, Redirect } from "react-router-dom";
import firebase from "../firebase/firebase.utils";

import "./App.css";

//Component Imports
import LandingPage from "../pages/landing/landing.page";
import Manage from "../pages/manage/manage.page";
import PrivateRoute from "../utils/private-route";
import SignInPage from "../pages/sign-in/sign-in.page";
import Unauthorized from "../pages/unauthorized/unauthorized.component";

import { auth } from "../firebase/firebase.utils";

class App extends React.Component {
  unsubscribeFromAuth = null;

  componentDidMount() {
    const { setCurrentUser } = this.props;

    this.unsubscribeFromAuth = auth.onAuthStateChanged(async user => {
      console.log("Current User:", user);
      if (user) {

        const token = await user.getIdToken();
        const idTokenResult = await user.getIdTokenResult();
        const hasuraClaim =
          idTokenResult.claims["https://hasura.io/jwt/claims"];
        if (hasuraClaim) {
          setCurrentUser({
            email: user.email,
            displayName: user.displayName,
            token
          });
        } else {
          // Check if refresh is required.
          const metadataRef = firebase
            .database()
            .ref("metadata/" + user.uid + "/refreshTime");
          metadataRef.on("value", async () => {
            // Force refresh to pick up the latest custom claims changes.
            const token = await user.getIdToken(true);
            setCurrentUser({
              email: user.email,
              displayName: user.displayName,
              token
            });
          });
        }
console.log('###Debug (app.js)| Token', token)
        //add the bearer token to the headers.
        localStorage.setItem("token", token);
      } else {
        setCurrentUser({
          email: null,
          displayName: null,
          token: null
        });
        localStorage.removeItem("token");
      }
    });
  }

  componentWillUnmount() {
    this.unsubscribeFromAuth();
  }

  render() {
    console.log("###Debug (App.js) | Props Current User: ", this.props.currentUser.email);
    return (
      <div>
        <Switch>
          <Route exact path="/" component={LandingPage} />
          <Route exact path="/unauthorized" component={Unauthorized} />
          <Route
            exact
            path="/signin"
            render={() =>
              this.props.currentUser.email != null ? (
                <Redirect to="/manage" />
              ) : (
                <SignInPage />
              )
            }
          />
          <PrivateRoute
            isAuthorized={this.props.currentUser.email != null}
            path="/manage"
            component={Manage}
          />
        </Switch>
      </div>
    );
  }
}

export default App;