import React from "react";
import { gql } from "apollo-boost";
import { useQuery } from "@apollo/react-hooks";
import { ThemeProvider } from "styled-components";
import GlobalStyles from "../Styles/GlobalStyles";
import Helmet from "./Helmet";
import Theme from "../Styles/Theme";
import Router from "../Routes/Router";
import { BrowserRouter } from "react-router-dom";

const QUERY = gql`
  {
    isLoggedIn @client
  }
`;

export default () => {
  const {
    data: { isLoggedIn },
  } = useQuery(QUERY);

  return (
    <ThemeProvider theme={Theme}>
      <>
        <GlobalStyles />
        <Helmet />
        <BrowserRouter>
          <Router isLoggedIn={isLoggedIn} />
        </BrowserRouter>
      </>
    </ThemeProvider>
  );
};