"use client";

import addScrollspy from "@/utils/addScroll";
import { init_classic_menu_resize } from "@/utils/menuToggle";
import { scrollToElement } from "@/utils/scrollToElement";
import { closeMobileMenu, toggleMobileMenu } from "@/utils/toggleMobileMenu";
import { useEffect, useRef, useState } from "react";
import Link from "next/link";

export default function HeaderNav({ links, animateY = false }: any) {
  const [isDropdownOpen, setIsDropdownOpen] = useState([""]);
  const dropdownRef = useRef(null);

  const toggleDropdown = (section: string[]) => {
    if (section == isDropdownOpen) {
      setIsDropdownOpen([""]);
    }
    setIsDropdownOpen(section);
  };

  useEffect(() => {
    setTimeout(() => {
      scrollToElement();
    }, 1000);
    init_classic_menu_resize();
    window.addEventListener("scroll", addScrollspy as any);

    window.addEventListener("resize", init_classic_menu_resize);

    return () => {
      window.removeEventListener("scroll", addScrollspy as any);
      window.removeEventListener("resize", init_classic_menu_resize);
    };
  }, []);

  return (
    <>
      {links[0].href?.includes("/") &&
        links.map((link: any, index: any) => (
          <>
            <li>
              {!Array.isArray(link?.child) && (
                <Link href={link.href}>
                  {animateY ? (
                    <span className="btn-animate-y">
                      <span className="btn-animate-y-1">{link.text}</span>
                      <span className="btn-animate-y-2" aria-hidden="true">
                        {link.text}
                      </span>
                    </span>
                  ) : (
                    link.text
                  )}
                </Link>
              )}

              {Array.isArray(link?.child) && (
                <>
                  <Link href={link?.href ?? "#"} className="mn-has-sub">
                    {link.text} <i className="mi-chevron-down" onClick={() => toggleDropdown([link.text])} />
                  </Link>

                  <ul className={`mn-sub to-right ${isDropdownOpen.includes(link.text) && "open"}`} ref={dropdownRef}>
                    {link.child.map((subLink: any, subLinkIdx: number) => (
                      <li key={subLinkIdx}>
                        {!Array.isArray(subLink?.child) && (
                          <Link href={subLink?.href} onClick={() => toggleMobileMenu()}>
                            {subLink?.text}
                          </Link>
                        )}
                        {Array.isArray(subLink?.child) && (
                          <>
                            <Link href={subLink?.href ?? "#"} className="mn-has-sub">
                              {subLink.text}{" "}
                              <i
                                className="mi-chevron-down"
                                onClick={() => toggleDropdown([link.text, subLink.text])}
                              />
                            </Link>

                            <ul className={`mn-sub to-right ${isDropdownOpen.includes(subLink.text) && "open"}`}>
                              {subLink.child.map((subLink2: any, subLinkIdx2: number) => (
                                <li key={subLinkIdx2}>
                                  <Link href={subLink2?.href} onClick={() => toggleMobileMenu()}>
                                    {subLink2?.text}
                                  </Link>
                                </li>
                              ))}
                            </ul>
                          </>
                        )}
                      </li>
                    ))}
                  </ul>
                </>
              )}
            </li>
            {index != links.length - 1 && (
              <div className="text-white h-[25px] mx-2 opacity-[0.3]" style={{ border: "1px solid white" }} />
            )}
          </>
        ))}

      {!links[0].href?.includes("/") &&
        links.map((link: any, index: any) => (
          <li className="scrollspy-link" key={index}>
            <a onClick={() => closeMobileMenu()} className="" href={link.href}>
              {animateY ? (
                <span className="btn-animate-y">
                  <span className="btn-animate-y-1">{link.text}</span>
                  <span className="btn-animate-y-2" aria-hidden="true">
                    {link.text}
                  </span>
                </span>
              ) : (
                link.text
              )}
            </a>
          </li>
        ))}
    </>
  );
}