import { siteConfig } from '@/lib/config';
import { useGlobal } from '@/lib/global';
import { useEffect } from 'react';
import CONFIG from '../config';
import { MenuItem } from './MenuItem';
/**
 * 响应式 折叠菜单
 */
export const MenuList = (props) => {
  const { customNav, customMenu } = props
  const { locale } = useGlobal()

  let links = [
    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: siteConfig('HEO_MENU_ARCHIVE', null, CONFIG) },
    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: siteConfig('HEO_MENU_SEARCH', null, CONFIG) },
    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category', show: siteConfig('HEO_MENU_CATEGORY', null, CONFIG) },
    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: siteConfig('HEO_MENU_TAG', null, CONFIG) }
  ]

  if (customNav) {
    links = customNav.concat(links)
  }

  useEffect(() => {
    // ===== responsive navbar
    const navbarToggler = document.querySelector('#navbarToggler');
    const navbarCollapse = document.querySelector('#navbarCollapse');

    // 点击弹出菜单
    navbarToggler?.addEventListener('click', () => {
      navbarToggler?.classList.toggle('navbarTogglerActive');
      navbarCollapse?.classList.toggle('hidden');
    });

    //= ==== close navbar-collapse when a  clicked
    document
      .querySelectorAll('#navbarCollapse ul li:not(.submenu-item) a')
      .forEach((e) =>
        e.addEventListener('click', () => {
          navbarToggler?.classList.remove('navbarTogglerActive');
          navbarCollapse?.classList.add('hidden');
        })
      );

    // ===== Sub-menu
    const submenuItems = document.querySelectorAll('.submenu-item');
    submenuItems.forEach((el) => {
      el.querySelector('a')?.addEventListener('click', () => {
        el.querySelector('.submenu')?.classList.toggle('hidden');
      });
    });
  }, [])

  // 如果 开启自定义菜单，则覆盖Page生成的菜单
  if (siteConfig('CUSTOM_MENU')) {
    links = customMenu
  }

  //   if (!links || links.length === 0) {
  //     return null
  //   }

  return <>
            <div>

              {/* 移动端菜单切换按钮 */}
              <button id="navbarToggler" className="absolute right-4 top-1/2 block -translate-y-1/2 rounded-lg px-3 py-[6px] ring-primary focus:ring-2 lg:hidden">
                <span className="relative my-[6px] block h-[2px] w-[30px] bg-white duration-200 transition-all" ></span>
                <span className="relative my-[6px] block h-[2px] w-[30px] bg-white duration-200 transition-all" ></span>
                <span className="relative my-[6px] block h-[2px] w-[30px] bg-white duration-200 transition-all" ></span>
              </button>

              {/* 响应式菜单 */}
              <nav id="navbarCollapse" className="absolute right-4 top-full hidden w-full max-w-[250px] rounded-lg bg-white py-5 shadow-lg dark:bg-dark-2 lg:static lg:block lg:w-full lg:max-w-full lg:bg-transparent lg:px-4 lg:py-0 lg:shadow-none dark:lg:bg-transparent xl:px-6">
                <ul className="blcok lg:flex 2xl:ml-20">
                    {links?.map((link, index) => <MenuItem key={index} link={link} />)}
                </ul>
              </nav>
            </div>

          </>
}