import { LogoColor } from "../images";
import { AuthLayoutRightSide } from "./AuthLayoutRightSide";

export type AuthContent =
  | "Login"
  | "Signup"
  | "EmailVerification"
  | "Dashboard"
  | "Home"
  | "ForgotPassword"
  | "ForgotPasswordCallback";

const getHeaderContent = (
  type: AuthContent,
): { headerText: string; headerBar: string } => {
  let headerText = "";
  let headerBar = type as string;

  if (type === "Login") {
    headerText = "Sign in";
  }

  if (type === "Signup") {
    headerText = "Sign up";
  }

  if (type === "ForgotPassword") {
    headerText = "Reset password";
  }

  if (type === "ForgotPasswordCallback") {
    headerText = "Set a new password";
  }

  if (type === "EmailVerification") {
    headerText = "Verifying your email address...";
    headerBar = "Verifying";
  }

  if (type === "Dashboard") {
    headerText = "Welcome back!";
    headerBar = "Dashboard";
  }

  if (type === "Home") {
    headerText = "GraphQL Analyzer";
    headerBar = "Welcome";
  }

  return {
    headerText,
    headerBar,
  };
};

export function AuthLayout(
  props: React.PropsWithChildren<{ type: AuthContent; headerText?: string }>,
) {
  const headerContent = getHeaderContent(props.type);

  return (
    <div className="flex justify-center h-screen">
      <div className="z-10 flex flex-1 flex-col shadow-2xl h-full">
        <div className=" mx-auto w-full h-full">
          <div className="flex flex-col justify-center h-full">
            <div className="mx-auto w-full max-w-sm lg:w-96">
              <div>
                <img className="m-auto mb-10 logo" src={LogoColor} alt="logo" />
                <div>
                  <h2 className="mt-6 text-gray-900 text-4xl font-extrabold tracking-tight leading-tight ">
                    {props.headerText || headerContent.headerText}
                  </h2>
                </div>
              </div>
              {props.children}
            </div>
          </div>
        </div>
      </div>
      <div className="hidden lg:relative lg:block lg:flex-1">
        <AuthLayoutRightSide />
      </div>
    </div>
  );
}
