import React from "react";
// imports for Redux Toolkit
import { Provider } from "react-redux";
import { store } from "../store/store";
import "cross-fetch/polyfill";
import { ApolloProvider } from "@apollo/react-hooks";
import ApolloClient from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { HttpLink } from "apollo-link-http";
import Head from "next/head";
import Router, { useRouter } from "next/router";

import { config, library } from "@fortawesome/fontawesome-svg-core";
config.autoAddCss = false;

import {
  faHome,
  faInfoCircle,
  faUser,
  faBookmark,
  faSignOutAlt,
  faCaretDown,
  faArrowAltCircleLeft,
  faArrowAltCircleRight,
  faAtom,
  faMap,
} from "@fortawesome/free-solid-svg-icons";

import { faYoutube } from "@fortawesome/free-brands-svg-icons";

library.add(
  faHome,
  faInfoCircle,
  faUser,
  faYoutube,
  faBookmark,
  faSignOutAlt,
  faCaretDown,
  faArrowAltCircleLeft,
  faArrowAltCircleRight,
  faAtom,
  faMap
);

const authToken = process.env.HASURA_GRAPHQL_JWT_SECRET;
const adminSecret = process.env.HASURA_ADMIN_SECRET;
const hasuraEndpoint = process.env.HASURA_ENDPOINT;

// Create an Apollo instance here; wraps Hasura engine
const createApolloClient = () => {
  return new ApolloClient({
    link: new HttpLink({
      uri: `${hasuraEndpoint}`,
      headers: {
        authorization: `Bearer ${authToken}`,
        "x-hasura-admin-secret": `${adminSecret}`,
      },
    }),
    cache: new InMemoryCache(),
  });
};

const client = createApolloClient();

export default function MyApp({ Component, pageProps }) {
  const router = useRouter();
  // Sets tab title using a modified version of the route name
  let title =
    router.pathname.slice(1).charAt(0).toUpperCase() + router.pathname.slice(2);

  return (
    <ApolloProvider client={client}>
      <Head>
        <title>{title ? title : "Home"}</title>
        <link rel="shortcut icon" href="/favicon.ico" />
      </Head>
      {/* Inject store props into unique Apollo component */}
      <Provider store={store}>
        <Component {...pageProps} />
      </Provider>
    </ApolloProvider>
  );
}