"use client"

import { sliderState, titleState } from "@/recoil"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { useRecoilState, useRecoilValue } from "recoil"
import { faBars } from "@fortawesome/free-solid-svg-icons"
import UserShort from "../Account/UserShort"
import Image from "next/image"
import { Link } from "@/i18n/routing"
import NotiBox from "./NotiBox"

type Props = {
  slot?: React.ReactNode
}

const Header = ({ slot }: Props) => {
  const [isOpen, setIsOpen] = useRecoilState(sliderState)
  const title = useRecoilValue(titleState)

  // const [scrollTop, setScrollTop] = useState(0)

  // useEffect(() => {
  //   const mainElement = document.getElementById("main-content")

  //   const handleScroll = () => {
  //     if (mainElement) {
  //       const scrollTop = mainElement.scrollTop
  //       setScrollTop(scrollTop)
  //     }
  //   }

  //   if (mainElement) {
  //     mainElement.addEventListener("scroll", handleScroll)
  //   }

  //   return () => {
  //     if (mainElement) {
  //       mainElement.removeEventListener("scroll", handleScroll)
  //     }
  //   }
  // }, [])

  const handleToggleMenu = () => {
    setIsOpen(!isOpen)
  }

  return (
    <header className="border-b border-[var(--secondary-20)] md:border-b-0 sticky top-0 left-0 z-40 bg-white">
      <div className="md:hidden py-7 px-4 flex items-center justify-between border-b border-[var(--secondary-20)]">
        <Link
          href="/"
          className="inline-block">
          <Image
            src="/wizzor2x.png"
            alt="WIZZOR"
            width={56}
            height={56}
            priority={true}
          />
        </Link>
        <div className="flex items-center gap-6">
          <UserShort />
          <NotiBox />
          <button
            type="button"
            className="w-8 h-8 text-3xl hover:text-[var(--primary--70)]"
            onClick={handleToggleMenu}>
            <FontAwesomeIcon icon={faBars} />
          </button>
        </div>
      </div>
      <div className={`py-6 px-4 xl:px-6 items-center md:flex`}>
        <h1 className={`text-xl md:text-2xl xl:text-3xl font-bold ${slot ? "mb-3 md:mb-0" : ""}`}>{title}</h1>
        <div className="grow flex items-center md:justify-end">
          {slot}
          <NotiBox classNameBtn="hidden md:block" />
        </div>
      </div>
    </header>
  )
}

export default Header