import UserAvtar from "@/public/images/perso.jpeg";
import { useSession } from "next-auth/react";
import { useState, useEffect } from "react";
import NavHeader from "./NavHeader";
import HeaderContent from "./HeaderContent";
import UserMenu from "./UserMenu";
import WithoutLoginUserMenu from "./WithoutLoginUserMenu";
import { updateTheme } from "@/services/public";

interface HeaderInterface {
  toggleSideBar: () => void;
}

const Header: React.FC<HeaderInterface> = ({ toggleSideBar,notify ,setNotify}) => {
  const { data, status } = useSession();
  const [sunButton, setDarkButton] = useState("active");
  const [moonButton, setMoonButton] = useState("");

  useEffect(() => {
    if (data?.user?.theme === "dark") {
      setDarkButton("");
      setMoonButton("active");
      document.body.classList.add("darkMode");
    }
  }, [data]);

  const toggleDarkMode = async () => {
    setDarkButton("");
    setMoonButton("active");
    document.body.classList.add("darkMode");
    await updateTheme(data?.user?.image, { theme: "dark" });
  };

  const toggleLightMode = async () => {
    setDarkButton("active");
    setMoonButton("");
    document.body.classList.remove("darkMode");
    await updateTheme(data?.user?.image, { theme: "light" });
  };

  return (
    <div className="header_sec">
      <NavHeader />
      <HeaderContent
        toggleDarkMode={toggleDarkMode}
        toggleLightMode={toggleLightMode}
        toggleSideBar={toggleSideBar}
        moonButton={moonButton}
        sunButton={sunButton}
        userMenu={
          status === "authenticated" ? (
            <UserMenu userAvtar={UserAvtar} userName={data?.user?.name} notify={notify} setNotify={setNotify}/>
          ) : (
            status !== "loading" && <WithoutLoginUserMenu />
          )
        }
      />
    </div>
  );
};

export default Header;