text: import React, { useState, useEffect } from "react";
  import Head from "next/head";
  import { signInWithPopup, GoogleAuthProvider } from "firebase/auth";
  import { collection, where, query, getDocs } from "firebase/firestore";
  
  import ThemeWrapper from "../../components/ThemeWrapper";
  import Navbar from "../../components/Navbar";
  import styles from "../../styles/Login.module.css";
  import { auth } from "../../logic/firebase";
  import { db } from "../../logic/firebase";
  import Update from "../../components/Update";
  
  export default function Login() {
    const [user, setUser] = useState(null);
    useEffect(() => {
      const user = JSON.parse(localStorage.getItem("weilai_user")) || null;
      setUser(user);
    }, []);
  
    const signIn = async () => {
      const provider = new GoogleAuthProvider();
      signInWithPopup(auth, provider)
        .then(async (result) => {
          const credential = GoogleAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
          const user = result.user;
          console.log(user);
          localStorage.setItem("weilai_user", JSON.stringify(user));
  
          //Now check if we have a user object
          const q = query(collection(db, "users"), where("name", "==", user.displayName));
          const querySnapshot = await getDocs(q);
  
          //If there is already a user, don't do the post-registration. But if there is, do post-registration
          let buffer = [];
          querySnapshot.forEach((e) => buffer.push(e));
          console.log(buffer.length);
          if (buffer.length === 0) {
            window.location.replace("/ui/explanation");
          } else {
            window.location.replace("/holdings/user");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    };
  
    return (
      <>
        <Head>
          <title>Login to Weilai</title>
          <meta name="description" content="Generated by create next app" />
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <ThemeWrapper>
          <div className={styles.main}>
            <Navbar />
            <Update />
            <div className={styles.content}>
              <div>
                <video
                  autoPlay
                  loop
                  style={{ width: "550px" }}
                  className={styles.video}
                >
                  <source src="https://vod-progressive.akamaized.net/exp=1639674262~acl=%2Fvimeo-prod-skyfire-std-us%2F01%2F3027%2F12%2F315137080%2F1217035683.mp4~hmac=e7fec1086aac1ee22e38f93bd8dbbfd0e17c9473ee8dfd57ee6204aabcfed94a/vimeo-prod-skyfire-std-us/01/3027/12/315137080/1217035683.mp4?filename=Seoul+-+21116.mp4" />
                </video>
              </div>
              <div className={styles.textWrapper}>
                <p className={styles.mainText}>Enjoyable.</p>
                <p className={styles.mainText}>Energetic.</p>
                <p className={styles.mainText}>And of course, Funny.</p>
                <p className={styles.subText}>
                  Weilai is the Ultimate card game, packed with energy,
                  <br />
                  logic, and tons of bad(but funny) puns.
                  <br />
                  <br />
                  Battle against time as your cards keep on getting weaker with
                  time. The
                  <br />
                  only way out is to trade, and save your cards before its too
                  late...
                </p>
              </div>
            </div>
            <button className={styles.submitButton} onClick={() => signIn()}>
              <i className={`bx bxl-google ${styles.google}`}></i>Sign in with Google
            </button>
          </div>
        </ThemeWrapper>
      </>
    );
  }
  