import styles from './mobile-navigation.module.css'
import { useEffect, useRef, useState } from 'react'
import { useLocation } from 'react-router'
import { ActionButton } from '@react-spectrum/s2/ActionButton'
import CloseIcon from '@react-spectrum/s2/icons/Close'
import ViewListIcon from '@react-spectrum/s2/icons/ViewList'
import SidebarMenu from './sidebar-menu'

function MobileNavigation() {
  const dialogRef = useRef<HTMLDialogElement>(null)
  const [isOpen, setIsOpen] = useState(false)
  const { key } = useLocation()

  // Close after all route changes, including selecting the current page.
  useEffect(() => {
    dialogRef.current?.close()
  }, [key])

  useEffect(() => {
    const media = window.matchMedia('(max-width: 640px)')
    const closeOnDesktop = () => {
      if (!media.matches) dialogRef.current?.close()
    }
    media.addEventListener('change', closeOnDesktop)
    return () => media.removeEventListener('change', closeOnDesktop)
  }, [])

  return (
    <div className={styles.mobileMenuToggle}>
      <ActionButton
        aria-label="打开菜单"
        aria-haspopup="dialog"
        aria-expanded={isOpen}
        aria-controls="mobile-navigation"
        isQuiet
        onPress={() => {
          dialogRef.current?.showModal()
          setIsOpen(true)
        }}
      >
        <ViewListIcon />
      </ActionButton>
      <dialog
        ref={dialogRef}
        id="mobile-navigation"
        className={styles.mobileNavigation}
        aria-labelledby="mobile-navigation-title"
        onClose={() => setIsOpen(false)}
      >
        <header className={styles.mobileNavigationHeader}>
          <span id="mobile-navigation-title">菜单</span>
          <ActionButton aria-label="关闭菜单" isQuiet onPress={() => dialogRef.current?.close()}>
            <CloseIcon />
          </ActionButton>
        </header>
        <nav className={styles.mobileNavigationContent} aria-label="页面导航">
          <SidebarMenu />
        </nav>
      </dialog>
    </div>
  )
}

export default MobileNavigation