import React from "react";
import { ApolloProvider } from "react-apollo";
import { HttpLink } from "apollo-link-http";
import ApolloClient from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";

//Styling imports
import "./App.css";

import HeaderAppBarContainer from "../components/header-app-bar/header-app-bar.container";
import SignIn from "../components/sign-in/sign-in.component";
import initialState from "../graphql/initial-state";
import JobListContainer from "../components/job-list/job-list.container";

//Todo: Issue with this line. Not sure why.
const graphqlEndpoint =
  process.env.REACT_APP_GRAPHQL_ENDPOINT ||
  "https://bodyshop-dev-db.herokuapp.com/v1/graphql";

export default function App({ authState }) {
  console.log("graphqlEndpoint", graphqlEndpoint);

  const isIn = authState.status === "in";

  const headers = isIn ? { Authorization: `Bearer ${authState.token}` } : {};

  const httpLink = new HttpLink({
    uri: graphqlEndpoint,
    headers
  });

  const client = new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache()
  });

  client.writeData({
    data: initialState
  });

  return (
    <ApolloProvider client={client}>
      <HeaderAppBarContainer />
      <SignIn />
      <JobListContainer />
    </ApolloProvider>
  );
}