import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { getUrlHead } from '../Data/getUrl';
import { Dropdown , Menu } from 'antd';
import logo from '../images/logo.png';
import LoginModal from '../Components/Login/LoginModal';

function Nav({ users, headData , successFunc , quitFunc , match }){
  const [ visible ,setVisible ] =  useState(false);
  const [ navs , setNavs ] = useState(undefined);
  useEffect(()=>{
    if(headData){
      setNavs(headData.navbar);
    }
  },[headData])

  function success(data) {
    setVisible(false);
    successFunc(data);
  }

  const menus =(
    <Menu className="menuItems">
      <Menu.Item>{users && users.real_name}</Menu.Item>
      <Menu.Item><a href="/admins">后台管理</a></Menu.Item>
      <Menu.Item onClick={quitFunc}>退出</Menu.Item>
    </Menu>
  )
  
  return(
    <div className="headDiv">
      <LoginModal visible={visible} onCancel={()=>setVisible(false)} successFunc={success}/>
      <ul className="headerNav">
        <li><img src={logo} alt="" width="110px" style={{marginRight:"100px"}}/></li>
        {
          navs && navs.length>0 && navs.map((i,k)=>{
            return(
              <li>
                {
                  i.link.indexOf("http") > -1 ?
                  <a href={i.link} target="_blank">{i.name}</a>
                  :
                  <Link to={i.link} className={i.link===(match && match.url) ? "color-blue":""}>{i.name}</Link>
                }
              </li>
            )
          })
        }
      </ul>
      <div className="headUserInfo">
        {
          users && users.login ?
          <Dropdown overlay={menus} placement={"bottomRight"}>
            <img src={users && getUrlHead(users.image_url)} alt="" width="48px" height="48px" style={{borderRadius:"50%"}}/>
          </Dropdown>
          :
          <a onClick={()=>setVisible(true)}>登录/注册</a>
        }
      </div>
    </div>
  )
}
export default Nav;