"use client";
import menu_data from '@/data/menu-data';
import Link from 'next/link'
import { usePathname } from 'next/navigation';
import { useState } from 'react';
import { useLanguage } from "@/contexts/LanguageContext";
import { localizedPath, unlocalizedPath } from "@/lib/localized-path";

interface MobileMenuProps {
  setIsOpen?: Function;
  isOpen?: boolean;
}

export default function MobileMenu({ setIsOpen, isOpen }: MobileMenuProps) {
  const { language } = useLanguage();
  const isArabic = language === "ar";
  const [navTitle, setNavTitle] = useState<string>("");
  const pathname = usePathname();
  const activePath = unlocalizedPath(pathname);

  const isActive = (path: string) => {
    if (path === "/") return activePath === "/";
    return activePath === path || activePath.startsWith(`${path}/`);
  };
  
  const openMobileMenu = (menu: string) => {
    if (navTitle === menu) {
      setNavTitle("");
    } else {
      setNavTitle(menu);
    }
  };


  return (
    <>
      <div className={`azzle-menu-wrapper ${isOpen ? "azzle-body-visible" : ""}`} onClick={() => setIsOpen && setIsOpen(false)}>
        <div className={`azzle-menu-area text-center ${isArabic ? 'rtl-menu' : ''}`} onClick={(e) => e.stopPropagation()} style={{
          right: isArabic ? 'auto' : '0',
          left: isArabic ? '0' : 'auto'
        }}>
          <div className="azzle-menu-mobile-top">
            <div className="mobile-logo">
              <Link href={localizedPath("/", language)}>
                <img src="/assets/images/logo.png" alt="SkyLight Chat" width={300} height={300} />
              </Link>
            </div>
            <button className="azzle-menu-toggle mobile" onClick={() => setIsOpen && setIsOpen(false)}>
              <i className="ri-close-line"></i>
            </button>
          </div>
          <div className="azzle-mobile-menu">
            <ul>
              {menu_data.map((item, i) => (
                <li key={i} className={`${item.title === navTitle ? 'azzle-active' : ''} ${item.has_submenu ? 'menu-item-has-children azzle-item-has-children' : ''}`}>
                  <Link href={localizedPath(item.path, language)} className={isActive(item.path) ? 'active-nav-link' : ''}>
                    {isArabic ? item.titleAr : item.title}
                    {item.has_submenu && <span className="azzle-mean-expand" onClick={() => openMobileMenu(item.title)}></span>}
                  </Link>
                  {item.has_submenu &&
                    <ul className={`sub-menu azzle-submenu ${item.title === navTitle ? 'azzle-open' : ''}`} style={{ display: navTitle === item.title ? "block" : "none" }}>
                      {item.sub_menus?.map((sub_item, index) => (
                        <li key={index}>
                          <Link className="no-border" href={localizedPath(sub_item.path, language)}>
                            {isArabic ? sub_item.titleAr : sub_item.title}
                          </Link>
                        </li>
                      ))}
                    </ul>
                  }
                </li>
              ))}
            </ul>
          </div>
          <div className="azzle-mobile-menu-btn">
            <Link className="azzle-default-btn sm-size" href="https://dashboard.skylightchat.com/register">
              {isArabic ? "ابدأ الآن" : "Get Started"}
            </Link>
          </div>
        </div>
      </div>
    </>
  )
}