import {  signOut, useSession } from "next-auth/react";
import { useEffect, useState } from "react";
import styles from "../../styles/pages/LoginBox.module.css";
import { signIn } from "next-auth/react";
import { useRouter } from "next/router";
import toast from "react-hot-toast";
import Template from "../../components/window/Template";
import Seo from "components/SEO";
import { Session } from "next-auth";
// import { GetServerSidePropsContext } from "next";

const LoginPage = ({ user }:{
  user:Session
}) => {
  const { data: session } = useSession();
  const nextRouter = useRouter();
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [signedIn, setSignedIn] = useState(false)
  const [disabled, setDisabled] = useState(false);
  useEffect(() => {
    // if user and/or session is defined, redirect to home page
    (async () => {
      if (user || session) setSignedIn(true);
    })();

    if(nextRouter?.query?.error) {
      } if(nextRouter?.query?.error === "AccessDenied") {
        toast.error("The email domain is untrusted, please use an email from trusted domains like gmail.com, hotmail.com, etc.", {
          duration: 12000
        })
    }
  }, [user, session]);
  async function submit() {
    if(disabled || signedIn) return
    if (user || session) {
      toast.error("You're Already logged in! Maybe you're trying to logout");
      return;
    }
     if(username.length < 4) {
      toast.error("Please enter a password longer than 4 characters")
      return
    }
    if(password.length < 4) {
      toast.error("Please enter a password longer than 4 characters")
      return
    }
    setDisabled(true)
    await signIn("credentials", {
  username: username,
  password: password
    });
    setDisabled(false)

  }
  return (
    <Template useWindow>
      <div className={styles.container}>
      <Seo templateTitle="Account"/>

        <form
          onSubmit={(e) => {
            e.preventDefault();
            submit()
            // Credentials sign in:
          }}
          className={`place-items-center ${signedIn ? "brightness-[.8]" : ""} grid gap-4`}
        >
          <input value={username} onChange={(e) => setUsername(e.target.value.replace(/ /g, ""))} name="username" required type="text" placeholder="Username" />
          <input value={password} onChange={(e) => setPassword(e.target.value.replace(/ /g, ""))} name="password" required type="password" placeholder="Password" />

          <button data-tooltip-pos="bottom" data-tip="You're already logged in" disabled={disabled || signedIn} className={`btn ${signedIn ? "tooltip" : ""}`}>Login</button>
        </form>
        <div className="grid place-items-center w-full">
          <div className={styles.divider_parent}>
            <div className={styles.divider} />
            <span>OR</span>
            <div className={styles.divider} />
          </div>
          <button
            disabled={!signedIn}
            data-tooltip-pos="top"
            data-tip="You're not logged in"
            onClick={() => {
              if(signedIn) signOut()
            }}
            className={`${signedIn ? "" : "tooltip"} btn btn-secondary`}
          >
            Logout
          </button>
        </div>
      </div>
    </Template>
  );
};
// export async function getServerSideProps(context: GetServerSidePropsContext) {
//   const csrfToken = await getCsrfToken(context)
//   return {
//     props: { csrfToken },
//   }
// }
export default LoginPage;