import "../styles/globals.css";
import "tailwindcss/tailwind.css";
import React, { useState } from "react";
import { GlobalSidebar } from "../components/layouts/global-sidebar";
import styles from "./_app.module.css";
import { ApolloProvider } from "@apollo/client";
import { useApollo } from "../commons/graphql/client";
import { ThemeProvider, useTheme } from "../commons/theme";
import { SwitchTheme } from "../components/switch-theme";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faCross,
  faHamburger,
  faTimes,
} from "@fortawesome/free-solid-svg-icons";
import clsx from "clsx";

function MyApp({ Component, pageProps }) {
  const apolloClient = useApollo(pageProps);
  const [focusOpenSidebar, setFocusOpenSidebar] = useState(false);
  return (
    <ApolloProvider client={apolloClient}>
      <ThemeProvider>
        <div className={styles.page}>
          <GlobalSidebar
            className={styles.sidebar}
            focusOpen={focusOpenSidebar}
            onClick={() => setFocusOpenSidebar(false)}
          />
          <div className={styles.primary}>
            <header className={styles.pageHeader}>
              <button
                className={clsx(styles.headerBtn, {
                  [styles.opened]: focusOpenSidebar,
                })}
                onClick={() => setFocusOpenSidebar(!focusOpenSidebar)}
              >
                <FontAwesomeIcon
                  icon={focusOpenSidebar ? faTimes : faHamburger}
                />
              </button>
              <h1>{"Ivan Li 的个人博客"}</h1>
              <div className={styles.actions}>
                <SwitchTheme />
              </div>
            </header>
            <div className={styles.wrapper}>
              <Component {...pageProps} />
            </div>
          </div>
        </div>
      </ThemeProvider>
    </ApolloProvider>
  );
}

export default MyApp;