import './App.scss'
import {Layout, Menu} from 'antd'
import type {ItemType, MenuItemType} from 'antd/es/menu/interface'
import {isEqual} from 'licia'
import React, {useEffect, useState} from 'react'
import {NavLink, Outlet, useLocation} from 'react-router'

const {Header, Content} = Layout

const headerNav: Array<MenuItemType> = [
  {key: '/', label: '首页'},
  {key: '/conversation', label: '对话'},
]

const App: React.FC = () => {
  const [_, setCurrentMenu] = useState<ItemType>()
  const [selectedKeys, setSelectedKeys] = useState<Array<string>>([])
  const location = useLocation()
  useEffect(() => {
    setSelectedKeys([location.pathname])
    setCurrentMenu(headerNav.find((nav => isEqual(nav?.key, location.pathname))))
  }, [location])

  return (
    <Layout className="app">
      <Header className="header">
        <Menu
          className="header-nav"
          theme="dark"
          mode="horizontal"
          selectedKeys={selectedKeys}
          items={headerNav.map(nav => ({
            key: nav.key,
            label: <NavLink to={nav.key as string}>{nav.label}</NavLink>
          }))}
        />
      </Header>
      <Layout>
        <Content className="content">
          <Outlet/>
        </Content>
      </Layout>
    </Layout>
  )
}

export default App