import logo from '@/assets/img/logo.png'
import { userStore } from '@/store/mobx'
import { iMenuItem } from '@/types/router'
import { validJLProject } from '@/utils/common/api'
import consts from '@/utils/consts'
import { Button, Dropdown, Menu, Tooltip } from "antd"
import { observer } from 'mobx-react'
import React, { useEffect } from 'react'
import { Link } from "react-router-dom"
import SvgIcon from '../SvgIcon'
import styles from './index.module.scss'
import './index.scss'
import MenuItem from './MenuItem'
interface iMenuProps {
  list: iMenuItem[]
}

const NavSider: React.FC<iMenuProps> = (props) => {
  const { list: MeunList } = props

  const handleLogout = () => {
    userStore.logout()
  }

  useEffect(() => {
    if (!userStore.isLogin) {
      userStore.getUserInfo()
    }
  }, [])

  const redirectToJL = async (e: React.MouseEvent) => {
    e.preventDefault()  
    const { code = -1, data = {} } = await validJLProject()
    if (code === consts.RET_CODE.SUCCESS) {
      const { env, token } = data
      if (token) {
        let redirect
        if (env) {
          redirect = `${consts.JL_PATH.QA}/login/management?auth=${token}`
        } else {
          redirect = `${consts.JL_PATH.PROD}/login/management?auth=${token}`
        }
        window.open(redirect)
      }
    }
  }
  return (
    <div className="main-nav">
      <div className="logo"><img src={logo} /></div>
      <div className="nav-content">
        <div className="nav-top">
          {
            MeunList?.map((item: iMenuItem, idx: number) =>
              item.isTop && <MenuItem key={idx} item={item} />
            )
          }
          {
            userStore.userInfo.jlAuth ? <Tooltip placement='right' title='计量支付'>
              <a>
              <SvgIcon type={'xxh-jl_logo'} style={{ fontSize: 27, color: '#7786ab', cursor: 'pointer' }} onClick={redirectToJL}/>
              </a>
            </Tooltip> : null
          }
        </div>
        <div className="nav-footer">
          {
            MeunList?.map((item: iMenuItem, idx: number) => {
              if (item.path === '/console/management') {
                return userStore.role === 'ADMIN' ? !item.isTop && <MenuItem key={idx} item={item} /> : ''
              } else {
                return !item.isTop && <MenuItem key={idx} item={item} />
              }
            })
          }
          <div className="pi-text-center">
            <Dropdown overlay={() => {
              return (
                <Menu>
                  <Menu.Item key="0">
                    <Link to="/console/account/info">账号资料</Link>
                  </Menu.Item>
                  <Menu.Item key="1">
                    <Link to="/console/account/safe">账号安全</Link>
                  </Menu.Item>
                  <Menu.Divider />
                  <Menu.Item key="2">
                    <Link to="/console/account/safe">帮助中心</Link>
                  </Menu.Item>
                  <Menu.Item key="3">
                    {/* <Link to="/login">退出登录</Link> */}
                    <span onClick={() => handleLogout()}>退出登录</span>
                  </Menu.Item>
                </Menu>
              )
            }} trigger={[ 'click' ]} placement="topRight">
              <Button size="small" className={styles.bottomBtn}>{userStore.menuBtnText?.slice(-3)}</Button>
            </Dropdown>
          </div>
        </div>
      </div>
    </div>
  )
}

export default observer(NavSider)