---
import { arr2Tree } from '@/utils/array'
import NavItem from './NavItem.astro'

const [menus] = arr2Tree(Astro.locals._menus || [])
const path = Astro.url.pathname
const searchId = Astro.url.search
var pathname = path.substring(4)
const url = pathname.length == 0 ? '' : pathname
const { lang } = Astro.props
const title = 'Aacademe'

const language = lang === 'zh' ? '简体中文' : 'English'

const me = [
  {
    name: '产品与解决方案',
    children: ['网络安全', '全闪存存储', 'AI计算', '软件平台与服务'],
  },
  {
    name: '了解我们',
    children: ['关于华为企业业务'],
  },
]
---

<nav
  id="pageNav"
  class="navbar navbar-expand-md fixed-top bg-light p-0 py-3"
  style="--bs-bg-opacity: 0.9"
>
  <div class="container">
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="offcanvas"
      data-bs-target="#academeNav"
      aria-controls="academeNav"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href={`/${lang}/`}>
      <img
        src="https://e.huawei.com/-/mediae/images/common/logo/logo_huawei.png"
        alt="Academe"
        width="120"
        class="d-inline-block align-text-top"
      />
    </a>
    <div id="academeNav" class="offcanvas-lg offcanvas-end">
      <div class="offcanvas-header">
        <a class="navbar-brand" href={`/${lang}/`}>
          <img
            src="../logo.png"
            alt="Academe"
            width="120"
            class="d-inline-block align-text-top"
          />
        </a>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          {
            me.map((item, index) => (
              <NavItem key={index} menu={item} lang={lang} />
            ))
          }
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              aria-current="page"
              data-bs-toggle="dropdown"
              href="#"
            >
              {language}
            </a>

            <ul
              class="dropdown-menu bg-light"
              style="--bs-bg-opacity: 0.9; --bs-dropdown-border-width: 0; --bs-dropdown-border-radius: 0; margin-top: 1.2rem"
            >
              <li class="lang-btn" data-lang="zh">
                <a class="dropdown-item" href=`/zh/${url}${searchId}`
                  >简体中文</a
                >
              </li>
              <li class="lang-btn" data-lang="en">
                <a class="dropdown-item" href=`/en/${url}${searchId}`>English</a
                >
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<script>
  const pageNav = document.querySelector('#pageNav')

  function pageNavScroll() {
    const offset = window.pageYOffset
    // console.log('----offset-----', offset)
    if (offset > 450) {
      pageNav.style.opacity = 0
      pageNav.style.display = 'none'
    } else if (offset > 50) {
      const diff = (450 - offset) / 400
      pageNav.style.opacity = diff
    } else {
      pageNav.style.opacity = 1
      pageNav.style.display = 'block'
    }
  }

  pageNavScroll()
  window.addEventListener('scroll', pageNavScroll)

  const langBtns = document.querySelectorAll('.lang-btn')
  langBtns.forEach((btn) => {
    btn.addEventListener('click', (e) => {
      // e.preventDefault();
      const lang = btn.dataset.lang
      localStorage.setItem('lang', lang)
    })
  })
</script>
