import "../styles/globals.css";
import "tailwindcss/tailwind.css";
import React from "react";
import { GlobalSidebar } from "../components/layouts/global-sidebar";
import styles from "./_app.module.css";
import { ApolloProvider } from "@apollo/client";
import { client } from "../commons/graphql/client";

function MyApp({ Component, pageProps }) {
  return (
    <ApolloProvider client={client}>
      <div className={styles.page}>
        <GlobalSidebar className={styles.sidebar} />
        <div className={styles.primary}>
          <header className={styles.pageHeader}>
            <h1>{"Ivan Li 的个人博客"}</h1>
            <div className={styles.actions}>
              <button onClick={() => switchTheme("light")}>亮色</button>
              <button onClick={() => switchTheme("dark")}>暗色</button>
            </div>
          </header>
          <div className={styles.wrapper}>
            <Component {...pageProps} />
          </div>
        </div>
      </div>
    </ApolloProvider>
  );
}

function switchTheme(mode: "light" | "dark" | "auto") {
  if (mode === "auto") {
    mode = "light";
  }

  if (mode === "dark") {
    document.documentElement.classList.add("dark");
  } else {
    document.documentElement.classList.remove("dark");
  }
}

export default MyApp;