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>
	<Helmet>
	  <title>{`メニュー | ${ SITE_TITLE }`}</title>
	</Helmet>

	{menu.map ((item, i) => (
	    <section key={i}>
	      <SectionTitle>{item.name}</SectionTitle>
	      <ul>
		{item.subMenu
		 .filter (subItem => (subItem.visible ?? true))
		 .map ((subItem, j) => ('name' in subItem && (
		    <li key={j}>
		      <PrefetchLink
			  to={subItem.to}
			  target={subItem.to.slice (0, 2) === '//'
				  ? '_blank'
				  : undefined}>
			{subItem.name}
		      </PrefetchLink>
		    </li>)))}
	      </ul>
	    </section>))}
      </MainArea>)
}) satisfies FC