"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import Logo from "@svg/Logo";
import { useState, useEffect } from "react";

const Nav = ({ categories }: any) => {
  categories = categories.data;

  const pathname = usePathname();

  const [isScrolled, setIsScrolled] = useState(false);

  const handleScroll = () => {
    const scrolled = window.scrollY > 0;
    setIsScrolled(scrolled);
  };

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  const [isActive, setIsActive] = useState(false); // Initial state

  const handleClick = () => {
    setIsActive(!isActive); // Toggle the state on click
  };

  const [isActiveSubLinks, setIsActiveSubLinks] = useState(false); // Initial state

  const handleSubClick = () => {
    setIsActiveSubLinks(!isActiveSubLinks); // Toggle the state on click
  };

  return (
    <>
      <nav
        className={`nav-bar ${pathname === "/" ? "fixed-nav" : "sticky-nav"} ${
          isScrolled ? "scrolled" : ""
        } ${isActive ? "scrolled" : ""}`}
      >
        <div className="content-fluid">
          <div className="flex items-center justify-between">
            <Link className="nav-link-logo" href="/">
              <Logo />
            </Link>
            <div className="nav-links hidden lg:flex">
              <Link className={"nav-link"} href="/#about" id="about-link">
                About Us
              </Link>
              <Link className={"nav-link"} href="/#services">
                Services
              </Link>
              <div className={"nav-link nav-drop-down"}>
                Projects
                <div className="drop-down">
                  {categories.map((category: any, index: number) => {
                    if (category.slug && category.title) {
                      const url = `/projects/${category.slug}`;
                      return (
                        <Link
                          key={index}
                          className={
                            pathname === url
                              ? "nav-drop-link active"
                              : "nav-drop-link"
                          }
                          href={url}
                        >
                          <span className="text">{category.title}</span>
                        </Link>
                      );
                    }
                  })}
                </div>
              </div>
              <Link
                className={
                  pathname === "/contact" ? "nav-link active" : "nav-link"
                }
                href="/contact"
              >
                <span className="text">Contact Us</span>
              </Link>
            </div>
            <div
              className={`burger-menu block lg:hidden ${
                isActive ? "active" : ""
              }`}
              onClick={handleClick}
            >
              <div className="line-1"></div>
              <div className="line-2"></div>
              <div className="line-3"></div>
              <div className="line-4"></div>
            </div>
          </div>
        </div>
      </nav>
      <div id="scrolled"></div>
      <div className={`mobile-nav ${isActive ? "active" : ""}`}>
        <div className="mobile-nav-links">
          <Link
            className={"mobile-nav-link mb-4"}
            href="/#about"
            onClick={handleClick}
          >
            About Us
          </Link>
          <Link
            className={"mobile-nav-link mb-4"}
            href="/#services"
            onClick={handleClick}
          >
            Services
          </Link>
          <div
            className={`mobile-nav-link mb-4 more-links ${
              isActiveSubLinks ? "active-more-links" : ""
            }`}
          >
            <div className="more-link-text" onClick={handleSubClick}>
              Projects
            </div>
            <div className="sub-links">
              {categories.map((category: any, index: number) => {
                if (category.slug && category.title) {
                  const url = `/projects/${category.slug}`;
                  return (
                    <Link
                      key={index}
                      className={
                        pathname === url ? "sub-link active" : "sub-link"
                      }
                      href={url}
                      onClick={handleClick}
                    >
                      <span className="text">{category.title}</span>
                    </Link>
                  );
                }
              })}
            </div>
          </div>
          <Link
            className={
              pathname === "/contact"
                ? "mobile-nav-link mb-4 active"
                : "mobile-nav-link mb-4"
            }
            href="/contact"
            onClick={handleClick}
          >
            <span className="text">Contact Us</span>
          </Link>
        </div>
      </div>
    </>
  );
};

export default Nav;