"use client";

import React from "react";
import Navigation from "./Navigation";
import ModalSignUp from "@/sections/ModalSignUp/ModalSignUp";
import ModalSignIn from "@/sections/ModalSignIn/ModalSignIn";
import { logout } from "@/app/(auth)/actions";
import { useRouter } from "next/navigation";
import { getAuthCookie } from "@/app/(auth)/actions";
import { SourceModal } from "@/types";
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
import pb from "@/lib/pocketbase";

interface HeaderProps {
  isUserLoggedIn: boolean;
}

const signUpButton = {
  onClick: () => {
    document
      .getElementById("sign-up-modal")
      ?.setAttribute("name", SourceModal.SignUp);
    document.getElementById("sign-up-modal")?.removeAttribute("price_id");
    document.getElementById("sign-up-modal")?.click();
  },
  text: "Sign Up",
  buttonColor: "bg-pink-700",
  buttonHover: "hover:bg-pink-700",
};
const signOutButton = {
  onClick: () => logout(),
  text: "Logout",
  buttonColor: "bg-red-300",
  buttonHover: "hover:bg-red-600",
};
const signInButton = {
  onClick: async (router?: AppRouterInstance) => {
    const authCookie = await getAuthCookie();
    pb.authStore.loadFromCookie(authCookie || "");
    if (!authCookie || !pb.authStore.isValid) {
      document.getElementById("sign-in-modal")?.setAttribute("name", "signIn");
      document.getElementById("sign-in-modal")?.click();
    } else {
      router?.push("/account");
    }
  },
  text: "SignIn",
  buttonColor: "text-pink-500",
  buttonHover: "hover:text-pink-700",
};
function Header({ isUserLoggedIn }: HeaderProps) {
  const router = useRouter();
  const button = isUserLoggedIn ? signOutButton : signUpButton;
  return (
    <header className="absolute w-full z-30">
      <div className="max-w-5xl mx-auto px-4 sm:px-6 md:pt-6">
        <div className="flex items-center justify-between h-20">
          <Navigation isUserLoggedIn={isUserLoggedIn} />

          {/* Desktop navigation */}
          <nav className=" md:flex md:grow">
            {/* Desktop sign in links */}
            <div className="flex flex-row grow items-center pr-2">
              {!isUserLoggedIn && (
                <button
                  onClick={() => signInButton.onClick(router)}
                  className={`btn-sm cursor-pointer rounded py-5 w-24 ${signInButton.buttonColor} ${signInButton.buttonHover}`}
                >
                  {signInButton.text}
                </button>
              )}
              <button
                onClick={button.onClick}
                className={`btn-sm cursor-pointer rounded py-5 w-24 text-white ml-3 ${button.buttonColor} ${button.buttonHover}`}
              >
                {button.text}
              </button>
            </div>
          </nav>
        </div>
      </div>
      <ModalSignIn />
      <ModalSignUp />
    </header>
  );
}

export default Header;