'use client'
import Link from 'next/link'
import QSelect from '@/components/common/select/QSelect'

export const ToggleonMouse = (e, act, target) => {
  const listWrap = e.target.closest(target)
  const ListItem = Array.from(listWrap.childNodes)
  ListItem.forEach((el) => {
    if (act === 'add') {
      el.classList.add('mouse')
    } else {
      el.classList.remove('mouse')
    }
  })
  if (act === 'add') {
    e.target.parentElement.classList.remove('mouse')
  }
}

export default function Header() {
  const SelectOption = [{ name: 'オンライン保証シ' }, { name: 'ステム' }]
  return (
    <header>
      <div className="header-inner">
        <div className="header-right">
          <h1 className="logo">
            <Link href={'#'}></Link>
          </h1>
          <nav>
            <ul className="nav-list ">
              <li
                className="nav-item "
                onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
                onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
              >
                <Link href={'#'}>ホームへ</Link>
              </li>
              <li
                className="nav-item"
                onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
                onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
              >
                <button>物品及び図面管理</button>
                <ul className="nav-depth2">
                  <li
                    className="nav-depth2-item"
                    onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
                    onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
                  >
                    <Link href={'#'}>新規物件登録</Link>
                  </li>
                  <li
                    className="nav-depth2-item"
                    onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
                    onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
                  >
                    <Link href={'#'}>モノ/図面管理</Link>
                  </li>
                </ul>
              </li>
              <li
                className="nav-item"
                onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
                onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
              >
                <button>コミュニティ</button>
                <ul className="nav-depth2">
                  <li
                    className="nav-depth2-item"
                    onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
                    onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
                  >
                    <Link href={'#'}>お知らせ</Link>
                  </li>
                  <li
                    className="nav-depth2-item"
                    onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
                    onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
                  >
                    <Link href={'#'}>FAQ</Link>
                  </li>
                  <li
                    className="nav-depth2-item"
                    onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
                    onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
                  >
                    <Link href={'#'}>素材のダウンロード</Link>
                  </li>
                </ul>
              </li>
            </ul>
          </nav>
        </div>
        <div className="header-left">
          <div className="profile-box">
            <button className="profile">Kim Ji Young</button>
          </div>
          <div className="sign-out-box">
            <button className="sign-out">ログアウト</button>
          </div>
          <div className="select-box">
            <QSelect title={'Q.ORDER'} option={SelectOption} />
          </div>
          <div className="btn-wrap">
            <button className="btn-frame small dark">移動</button>
          </div>
        </div>
      </div>
    </header>
  )
}