btrc-hub/frontend/src/components/TopNav.tsx

import axios from 'axios'
import toCamel from 'camelcase-keys'
import React, { useState, useEffect } from 'react'
import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'

import { Button } from '@/components/ui/button'
import { API_BASE_URL } from '@/config'
import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
import { cn } from '@/lib/utils'

import type { Tag, User, WikiPage } from '@/types'

type Props = { user:	User | null
	       setUser: (user: User) => void }

const enum Menu { None,
		  Post,
		  User,
		  Tag,
		  Wiki }


export default ({ user, setUser }: Props) => {
  const location = useLocation ()
  const navigate = useNavigate ()

  const [selectedMenu, setSelectedMenu] = useState<Menu> (Menu.None)
  const [wikiId, setWikiId] = useState<number | null> (WikiIdBus.get ())
  const [wikiSearch, setWikiSearch] = useState ('')
  const [activeIndex, setActiveIndex] = useState (-1)
  const [suggestions, setSuggestions] = useState<WikiPage[]> ([])
  const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
  const [tagSearch, setTagSearch] = useState ('')
  const [userSearch, setUserSearch] = useState ('')
  const [postCount, setPostCount] = useState<number | null> (null)

  const MyLink = ({ to, title, menu, base }: { to:    string
					       title: string
					       menu?: Menu
					       base?: string }) => (
      <Link to={to} className={cn ('hover:text-orange-500 h-full flex items-center',
				   (location.pathname.startsWith (base ?? to)
				    ? 'bg-gray-700 px-4 font-bold'
				    : 'px-2'))}>
	{title}
      </Link>)

  const whenTagSearchChanged = ev => {
    // TODO: 実装

    setTagSearch (ev.target.value)

    const q: string = ev.target.value.split (' ').at (-1)
    if (!(q))
      {
	setSuggestions ([])
	return
      }
  }

  const whenWikiSearchChanged = ev => {
    // TODO: 実装

    setWikiSearch (ev.target.value)

    const q: string = ev.target.value.split (' ').at (-1)
    if (!(q))
      {
	setSuggestions ([])
	return
      }
  }

  const whenUserSearchChanged = ev => {
    // TODO: 実装

    setUserSearch (ev.target.value)

    const q: string = ev.target.value.split (' ').at (-1)
    if (!(q))
      {
	setSuggestions ([])
	return
      }
  }

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter' && wikiSearch.length && (!(suggestionsVsbl) || activeIndex < 0))
      {
	navigate (`/wiki/${ encodeURIComponent (wikiSearch) }`)
	setSuggestionsVsbl (false)
      }
  }

  const handleTagSelect = (tag: Tag) => {
  }

  useEffect (() => {
    const unsubscribe = WikiIdBus.subscribe (setWikiId)
    return () => unsubscribe ()
  }, [])

  useEffect (() => {
    if (location.pathname.startsWith ('/posts'))
      setSelectedMenu (Menu.Post)
    else if (location.pathname.startsWith ('/users'))
      setSelectedMenu (Menu.User)
    else if (location.pathname.startsWith ('/tags'))
      setSelectedMenu (Menu.Tag)
    else if (location.pathname.startsWith ('/wiki'))
      setSelectedMenu (Menu.Wiki)
    else
      setSelectedMenu (Menu.None)
  }, [location])

  useEffect (() => {
    if (!(wikiId))
      return

    void (async () => {
      try
      {
	const { data: pageData } = await axios.get (`${ API_BASE_URL }/wiki/${ wikiId }`)
	const wikiPage: WikiPage = toCamel (pageData, { deep: true })

	const { data: tagData } = await axios.get (`${ API_BASE_URL }/tags/name/${ wikiPage.title }`)
	const tag: Tag = toCamel (tagData, { deep: true })

	setPostCount (tag.postCount)
      }
      catch
      {
	setPostCount (0)
      }
    }) ()
  }, [wikiId])

  return (
      <>
	<nav className="bg-gray-800 text-white px-3 flex justify-between items-center w-full min-h-[48px]">
	  <div className="flex items-center gap-2 h-full">
	    <Link to="/" className="mx-4 text-xl font-bold text-orange-500">ぼざクリ タグ広場</Link>
	    <MyLink to="/posts" title="広場" />
	    <MyLink to="/tags" title="タグ" />
	    <MyLink to="/wiki/ヘルプ:ホーム" base="/wiki" title="Wiki" />
	    <MyLink to="/users/settings" base="/users" title="ニジラー" />
	  </div>
	  <div className="ml-auto pr-4">
	    {user && (
		<Button onClick={() => navigate ('/users/settings')}
			className="bg-gray-600">
		  {user.name || '名もなきニジラー'}
		</Button>)}
	  </div>
	</nav>
	{(() => {
	  const className = 'bg-gray-700 text-white px-3 flex items-center w-full min-h-[40px]'
	  const subClass = 'hover:text-orange-500 h-full flex items-center px-3'
	  const inputBox = 'flex items-center px-3 mx-2'
	  const Separator = () => <span className="flex items-center px-2">|</span>
	  switch (selectedMenu)
	  {
	  case Menu.Post:
	    return (
		<div className={className}>
		  <Link to="/posts" className={subClass}>一覧</Link>
		  <Link to="/posts/new" className={subClass}>投稿追加</Link>
		  <Link to="/wiki/ヘルプ:広場" className={subClass}>ヘルプ</Link>
		</div>)
	  case Menu.Tag:
	    return (
		<div className={className}>
		  {/* TODO: リリース後にやる */}
		  {/* <input type="text"
			 className={inputBox}
			 placeholder="タグ検索"
			 value={tagSearch}
			 onChange={whenTagSearchChanged}
			 onFocus={() => setSuggestionsVsbl (true)}
			 onBlur={() => setSuggestionsVsbl (false)}
			 onKeyDown={handleKeyDown} /> */}
		  {/* <Link to="/tags" className={subClass}>タグ</Link> */}
		  {/* <Link to="/tags/aliases" className={subClass}>別名タグ</Link>
		  <Link to="/tags/implications" className={subClass}>上位タグ</Link> */}
		  <Link to="/tags/nico" className={subClass}>ニコニコ連携</Link>
		  <Link to="/wiki/ヘルプ:タグのつけ方" className={subClass}>タグのつけ方</Link>
		  <Link to="/wiki/ヘルプ:タグ" className={subClass}>ヘルプ</Link>
		</div>)
	  case Menu.Wiki:
	    return (
		<div className={className}>
		  {/* TODO: リリース後にやる */}
		  {/* <input type="text"
			 className={inputBox}
			 placeholder="Wiki 検索"
			 value={wikiSearch}
			 onChange={whenWikiSearchChanged}
			 onFocus={() => setSuggestionsVsbl (true)}
			 onBlur={() => setSuggestionsVsbl (false)}
			 onKeyDown={handleKeyDown} /> */}
		  <Link to="/wiki" className={subClass}>検索</Link>
		  <Link to="/wiki/new" className={subClass}>新規</Link>
		  <Link to="/wiki/changes" className={subClass}>全体履歴</Link>
		  <Link to="/wiki/ヘルプ:Wiki" className={subClass}>ヘルプ</Link>
		  {(/^\/wiki\/(?!new|changes)[^\/]+/.test (location.pathname) && wikiId) &&
		      <>
			<Separator />
			<Link to={`/posts?tags=${ location.pathname.split ('/')[2] }`} className={subClass}>広場 ({postCount || 0})</Link>
			<Link to={`/wiki/changes?id=${ wikiId }`} className={subClass}>履歴</Link>
			<Link to={`/wiki/${ wikiId || location.pathname.split ('/')[2] }/edit`} className={subClass}>編輯</Link>
		      </>}
		</div>)
	  case Menu.User:
	    return (
		<div className={className}>
		  {/* TODO: リリース後にやる */}
		  {/* <input type="text"
			 className={inputBox}
			 placeholder="ニジラー検索"
			 value={userSearch}
			 onChange={whenUserSearchChanged}
			 onFocus={() => setSuggestionsVsbl (true)}
			 onBlur={() => setSuggestionsVsbl (false)}
			 onKeyDown={handleKeyDown} /> */}
		  {/* <Link to="/users" className={subClass}>一覧</Link>
		  {user && <Link to={`/users/${ user.id }`} className={subClass}>お前</Link>} */}
		  {user && <Link to="/users/settings" className={subClass}>設定</Link>}
		</div>)
	  }
	}) ()}
      </>)
}