import { Helmet } from 'react-helmet-async'

import PrefetchLink from '@/components/PrefetchLink'
import { menuOutline } from '@/components/TopNav'
import SectionTitle from '@/components/common/SectionTitle'
import MainArea from '@/components/layout/MainArea'
import { SITE_TITLE } from '@/config'

import type { FC } from 'react'

import type { User } from '@/types'


export default (() => {
  const menu = menuOutline (
      { tag: null, wikiId: null, user: { } as User, pathName: location.pathname })

  return (
      <MainArea className="md:flex">
	<Helmet>
	  <title>{`メニュー | ${ SITE_TITLE }`}</title>
	</Helmet>

	{[...Array (Math.ceil (menu.length / 4)).keys ()].map (i => (
	    <div key={i} className="flex-1 mx-16">
	      {menu.slice (4 * i, 4 * (i + 1)).map ((item, j) => (
		  <section key={j}>
		    <SectionTitle className="font-bold">{item.name}</SectionTitle>
		    <ul>
		      {item.subMenu
		       .filter (subItem => (subItem.visible ?? true))
		       .map ((subItem, k) => ('name' in subItem && (
			  <li key={k}>
			    <PrefetchLink
				to={subItem.to}
				target={subItem.to.slice (0, 2) === '//'
					? '_blank'
					: undefined}>
			      {subItem.name}
			    </PrefetchLink>
			  </li>)))}
		    </ul>
		  </section>))}
	    </div>))}
      </MainArea>)
}) satisfies FC