import { Avatar, Menu, Dropdown } from 'antd'
import { DownOutlined } from '@ant-design/icons'
import style from './style.module.scss'
import { title } from 'constant'
import { useSelector, useDispatch, postLogout } from 'store'
import { useNavigate, RoutePath } from 'router'


export const HeaderContent = () => {
  const user = useSelector(store => store.user.value)
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const logout = async () => {
    await dispatch(postLogout()).unwrap()
    navigate(RoutePath.login, { replace: true })
  }

  const items = [
    {
      key: '1',
      label: <div onClick={logout} style={{textAlign: 'center'}}>退出</div>,
    }
  ]

  return (
    <>
      <h2 className={style.title}>{title}</h2>
      <div className={style.avatar}>
        <Dropdown 
          overlay={<Menu style={{width: '100px'}} items={items} />} 
          className={style['logout-drop']} 
          placement="bottomRight">
          <div>
            <Avatar src={user.head} />
            <span className={style.username}>{user.nickName}</span>
            <DownOutlined />
          </div>
        </Dropdown>
      </div>
    </>
  )
}