import React, { useEffect } from "react";
import { useApolloClient, useQuery } from "@apollo/react-hooks";
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 ManagePage 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";

import { GET_CURRENT_USER } from "../graphql/local.queries";
import LoadingSpinner from "../components/loading-spinner/loading-spinner.component";
import AlertComponent from "../components/alert/alert.component";
import SignOut from "../components/sign-out/sign-out.component";

import { UPSERT_USER } from "../graphql/user.queries";

export default () => {
  const apolloClient = useApolloClient();

  useEffect(() => {
    //Run the auth code only on the first render.
    const unsubscribeFromAuth = auth.onAuthStateChanged(async user => {
      if (user) {
        let token;
        token = await user.getIdToken();
        const idTokenResult = await user.getIdTokenResult();
        const hasuraClaim =
          idTokenResult.claims["https://hasura.io/jwt/claims"];
        if (hasuraClaim) {
        } 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.
            token = await user.getIdToken(true);
          });
        }
        apolloClient.writeData({
          data: {
            currentUser: {
              email: user.email,
              displayName: user.displayName,
              token,
              uid: user.uid,
              photoUrl: user.photoURL,
              __typename: "currentUser"
            }
          }
        });
        //add the bearer token to the headers.
        localStorage.setItem("token", token);

        apolloClient
          .mutate({
            mutation: UPSERT_USER,
            variables: { authEmail: user.email, authToken: user.uid }
          })
          .then()
          .catch(error => {
            console.log("Upsert error!!!!", error);
          });
      } else {
        apolloClient.writeData({ data: { currentUser: null } });
        localStorage.removeItem("token");
      }
    });

    return function cleanup() {
      unsubscribeFromAuth();
    };
  }, [apolloClient]);

  const HookCurrentUser = useQuery(GET_CURRENT_USER);
  if (HookCurrentUser.loading) return <LoadingSpinner />;
  if (HookCurrentUser.error)
    return <AlertComponent message={HookCurrentUser.error.message} />;
  return (
    <div>
      <SignOut />
      <Switch>
        <Route exact path="/" component={LandingPage} />
        <Route exact path="/unauthorized" component={Unauthorized} />
        <Route
          exact
          path="/signin"
          render={() =>
            HookCurrentUser.data.currentUser ? (
              <Redirect to="/manage" />
            ) : (
              <SignInPage />
            )
          }
        />
        <PrivateRoute
          isAuthorized={HookCurrentUser.data.currentUser ? true : false}
          path="/manage"
          component={ManagePage}
        />
      </Switch>
    </div>
  );
};