import { useEffect, useState } from "react";
import Router, { useRouter } from "next/router";
import Image from "next/image";
import LinkComp from "next/link";

import { setToken } from "utils/auth";

// import Background from "assets/images/header/background.svg";
// import Book from "assets/images/header/book.svg";
// import Pizza from "assets/images/header/pizza.svg";
import AvatarBot from "assets/images/avatar_bot.png";

export default function DiscordCallback() {
  const { asPath } = useRouter();
  const [fragment, setFragment] = useState<any>(null);
  const [accessToken, setAccessToken] = useState<any>(null);

  useEffect(() => {
    setFragment(new URLSearchParams((asPath as string).split("#")[1]));
  }, []);

  useEffect(() => {
    setAccessToken(fragment?.get("access_token"));
  }, [fragment]);

  useEffect(() => {
    if (accessToken) {
      setToken(accessToken);
      // redirect to home
      Router.push("/");
    }
  }, [accessToken]);

  return (
    <header className="relative z-1 h-screen">
      <div className="z-1 px-6 h-full">
        <div className="container mx-auto relative h-full flex items-center justify-center">
          <div className="max-w-2xl mx-auto bg-dark-500 w-full rounded-2xl grid grid-cols-1 lg:grid-cols-5 overflow-hidden shadow-xl transform transition-all duration-400">
            <div className="lg:col-span-3 py-9 px-8 text-center">
              <Image
                width={64}
                height={64}
                alt="Clyde the Bot"
                src={AvatarBot}
                className="w-16 mx-auto"
              />
              <h3 className="text-white font-bold text-2xl text-center mt-1 tracking-wide">
                The Guardian
              </h3>
              <p className="text-lg text-dark-100">
                {!accessToken
                  ? "Hello, something went wrong. Please go back."
                  : "Login in progress..."}
              </p>
              {!accessToken && (
                <LinkComp href="/">
                  <button className="bg-[#f02727] text-white rounded-lg w-full text-center px-3 py-3 mt-5 font-semibold hover:bg-opacity-80">
                    Go back to website
                  </button>
                </LinkComp>
              )}
            </div>
            <div
              style={
                {
                  // backgroundImage: `url(${ModalLoginIllustration.src})`,
                }
              }
              className="w-full h-full bg-cover hidden lg:block bg-center lg:col-span-2 relative bg-dark-600"
            />
          </div>
        </div>
      </div>
      <div className="bg-blue h-full w-full absolute top-0 left-0 -z-1">
        {/* <Image
          width={124}
          height={124}
          alt="Decoration Background"
          src={Book}
          className="absolute select-none left-20 top-1/3 pointer-events-none hidden lg:block"
        />
        <Image
          width={124}
          height={124}
          alt="Decoration Background"
          src={Pizza}
          className="absolute select-none bottom-20 right-20 pointer-events-none hidden lg:block"
        />
        <Image
          width={124}
          height={124}
          alt="Decoration Background"
          src={Background}
          className="w-full absolute select-none bottom-0 left-0 pointer-events-none -z-1"
        /> */}
      </div>
    </header>
  );
}