import { useEffect, useState } from "react";
import { GetGoogleAuthUrl } from "../services/AuthService"
import { isApiError, type ApiError } from "../types/api/error"
import { useSearchParams } from "react-router-dom";


export default function LoginPage() {
  const [error, setError] = useState<string>("");
  const [searchParams, ] = useSearchParams();

  const clickHandler = async (): Promise<void> => {
    const result: string | ApiError = await GetGoogleAuthUrl();

    if (isApiError(result)) {
      setError(result.message);
      return;
    }

    window.location.href = result;
  }

  useEffect(() => {
    if (error)
      console.error(error);
  }, [error]);

  useEffect(() => {
    if (searchParams.has("error")) {
      const error: string = searchParams.get("error")!;
      setError(error);
    }
  }, [searchParams]);

  // TODO: Implement an error display!
  return <>
    <div className="h-screen w-full grid place-items-center bg-gray-100">
      <div className="w-3/4 sm:w-3/4 md:w-1/2 lg:w-2/7 bg-white border border-gray-200 rounded-xl shadow-2xs">
        <div className="p-4 sm:p-7">
          <div className="">
            <h1 className="block text-2xl font-bold text-gray-800">
              Sign in to Continue
            </h1>
            <p className="mt-2 text-sm text-gray-600">
              You need to sign in to continue. Don't have an account? Signing in will
              create one for you!
            </p>
          </div>
          <div className="mt-5">
            <button onClick={() => { void clickHandler(); }} className="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-2xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none cursor-pointer">
              <svg className="w-4 h-auto" width="46" height="47" viewBox="0 0 46 47" fill="none">
                <path
                  d="M46 24.0287C46 22.09 45.8533 20.68 45.5013 19.2112H23.4694V27.9356H36.4069C36.1429 30.1094 34.7347 33.37 31.5957 35.5731L31.5663 35.8669L38.5191 41.2719L38.9885 41.3306C43.4477 37.2181 46 31.1669 46 24.0287Z"
                  fill="#4285F4"
                ></path>
                <path
                  d="M23.4694 47C29.8061 47 35.1161 44.9144 39.0179 41.3012L31.625 35.5437C29.6301 36.9244 26.9898 37.8937 23.4987 37.8937C17.2793 37.8937 12.0281 33.7812 10.1505 28.1412L9.88649 28.1706L2.61097 33.7812L2.52296 34.0456C6.36608 41.7125 14.287 47 23.4694 47Z"
                  fill="#34A853"
                ></path>
                <path
                  d="M10.1212 28.1413C9.62245 26.6725 9.32908 25.1156 9.32908 23.5C9.32908 21.8844 9.62245 20.3275 10.0918 18.8588V18.5356L2.75765 12.8369L2.52296 12.9544C0.909439 16.1269 0 19.7106 0 23.5C0 27.2894 0.909439 30.8731 2.49362 34.0456L10.1212 28.1413Z"
                  fill="#FBBC05"
                ></path>
                <path
                  d="M23.4694 9.07688C27.8699 9.07688 30.8622 10.9863 32.5344 12.5725L39.1645 6.11C35.0867 2.32063 29.8061 0 23.4694 0C14.287 0 6.36607 5.2875 2.49362 12.9544L10.0918 18.8588C11.9987 13.1894 17.25 9.07688 23.4694 9.07688Z"
                  fill="#EB4335"
                ></path>
              </svg>
              Sign in with Google
            </button>
          </div>
        </div>
      </div>
    </div>
  </>
}
