"use client";

import React, {useEffect, useState} from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";

interface MenuItemProps {
  label: string,
  link: string,
  submenu?: { label: string; link: string }[],
  closeDropdown?: () => void
}



const MenuItem: React.FC<MenuItemProps> = ({ label, link, submenu, closeDropdown }) => {
  const pathname = usePathname();
  const isActive = pathname == link;
  const [isMobile, setIsMobile] = useState(false);

  const isParentActive = pathname === link || (submenu ? submenu.some((sub) => pathname === sub.link) : false);


  useEffect(() => {
    const checkScreenSize = () => {
      setIsMobile(window.innerWidth <= 991);
    };

    // Initial check
    checkScreenSize();

    // Listen for window resize events
    window.addEventListener("resize", checkScreenSize);
    return () => window.removeEventListener("resize", checkScreenSize);
  }, []);

  const handle_dropdown = () => {
    const menus = document.querySelector(".navbar .dropdown_menu_parent .dropdown-menu");
    const menus_active = document.querySelector('.navbar .dropdown_menu_parent > .nav-link');
    menus_active?.classList.toggle('nav-link-active');
    menus?.classList.toggle('dropdown-menu-active');
  }

  if (submenu) {
    return (
      <li className={`nav-item ${isParentActive ? "active" : ""} ${isMobile ? "dropdown_menu_parent" : ""}`} key={label} onClick={isMobile ? handle_dropdown : undefined}>
        <Link
          href={link}
          className="nav-link"
        >
          {label} <i className="bx bx-chevron-down"></i>
        </Link>

        <ul className="dropdown-menu">
          {submenu.map((subItem) => {
            const isActive = pathname == subItem.link;
            return (
              <li className="nav-item" key={subItem.label}>
                <Link
                  href={subItem.link} onClick={closeDropdown}
                  className={`nav-link ${isActive ? "active" : ""}`}
                >
                  {subItem.label}
                </Link>
              </li>
            );
          })}
        </ul>
      </li>
    );
  }

  return (
    <li className="nav-item" key={label}>
      <Link href={link} className={`nav-link ${isActive ? "active" : ""}`} onClick={closeDropdown}>
        {label}
      </Link>
    </li>
  );
};

export default MenuItem;