"use client";

import Image from "next/image";
import { Log } from "oidc-client-ts";
import { useAuth } from "react-oidc-context";

Log.setLogger(console);

export default function Page() {
  const auth = useAuth();
  console.log(auth);

  switch (auth.activeNavigator) {
    case "signinSilent":
      return <div>Signing you in...</div>;
    case "signoutRedirect":
      return <div>Signing you out...</div>;
  }

  if (auth.isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <main
      className={`flex min-h-screen flex-col items-center justify-between p-24`}
    >
      {auth.error && <div>{auth.error.message}</div>}
      {auth.isAuthenticated && (
        <div>
          <p>Hello {auth.user?.profile.name} </p>
        </div>
      )}
      {auth.isAuthenticated && (
        <button onClick={() => void auth.removeUser()}>Log out</button>
      )}
      {!auth.isAuthenticated && (
        <button onClick={() => void auth.signinRedirect()}>Log in</button>
      )}
      <Image src={"/meowl.png"} width="460" height="460" alt="Meowl image" />
    </main>
  );
}
