import React, { useContext, useEffect, useState } from 'react';
import { Avatar, Button, Dropdown, Space, Tabs } from 'antd';
import type { TabsProps } from 'antd';
import styles from './index.module.scss';
import { Router, useRouter } from 'next/router';
import LoginModal from '~/components/loginModal';
import PublishModal from './publishModal';
import JoinModal from './joinModal';
import { UserContext } from '~/lib/userProvider';

const items: TabsProps['items'] = [
  {
    key: '/home',
    label: `  首页  `,
  },
  {
    key: '/jobServices',
    label: `作业服务`,
  },
  {
    key: '/equipmentLeasing',
    label: `设备租赁`,
  },
  {
    key: '/flyingHandService',
    label: `飞手培训`,
  },
  {
    key: '/mall',
    label: `产品商城`,
  },
  {
    key: '/projectInfo',
    label: `项目资讯`,
  },
  {
    key: '/forum',
    label: `社区论坛`,
  },
];

type Props = {
  style?: React.CSSProperties;
};

export default function NavHeader(props: Props) {
  const router = useRouter();
  const [currentPath, setCurrentPath] = useState('');
  const { userInfo, testLogin, logout, setNeedLogin, needLogin } = useContext(UserContext);

  useEffect(() => {
    const routerTo = items?.filter((item) => router.route == item.key)[0];
    if (routerTo) {
      setCurrentPath(routerTo?.key!);
    } else {
      setCurrentPath(router.route);
    }
    console.log('currentHash', currentPath);
  }, [router.route]);

  //导航更改
  const onChange = (key: string) => {
    router.push(key);
  };

  //退出登录
  const onLogout = () => {
    logout();
  };

  const [openLoginModal, setOpenLoginModal] = useState(false); //登录modal
  const [openPublishModal, setOpenPublishModal] = useState(false); //发布modal
  const [openJoinModal, setOpenJoinModal] = useState(false); //加盟modal

  //发布按钮事件
  function onPublish() {
    //登录判断
    if (!userInfo) {
      setOpenLoginModal(true);
    } else {
      setOpenPublishModal(true);
    }
  }

  //加盟按钮事件
  function onJoin() {
    //登录判断
    if (!userInfo) {
      setOpenLoginModal(true);
    } else {
      setOpenJoinModal(true);
    }
  }

  //从其它组件通知需要登录
  useEffect(() => {
    if (needLogin) {
      setOpenLoginModal(true);
    }
  }, [needLogin]);

  return (
    <div className={styles.navHeader} style={props.style}>
      <div className={styles.nav}>
        <div className={styles.logo}></div>
        <Tabs
          className={styles.tabs}
          activeKey={currentPath}
          items={items}
          onChange={onChange}
          onTabClick={onChange}
        />
        <Space size={16} className={styles.btns}>
          <Button type='primary' className={styles.btn1} onClick={onPublish}>
            + 发布需求
          </Button>
          <Button className={styles.btn2} onClick={onJoin}>
            加盟入驻
          </Button>
        </Space>
        {userInfo ? (
          <div className={styles.haedImg}>
            <Dropdown
              menu={{
                items: [
                  {
                    key: '2',
                    label: (
                      <div onClick={() => router.push('/personalCenter/servicesOrders')}>
                        我的订单
                      </div>
                    ),
                  },
                  { key: '1', label: <div onClick={onLogout}>退出登录</div> },
                ],
              }}
            >
              <Avatar size={36} style={{ background: '#bdbdbd' }} src={userInfo.userImg}></Avatar>
            </Dropdown>
          </div>
        ) : (
          <Button
            type='text'
            onClick={() => setOpenLoginModal(true)}
            style={{ fontWeight: 'bold', fontSize: 16 }}
          >
            登录
          </Button>
        )}
      </div>
      <LoginModal
        open={openLoginModal}
        onCancel={() => {
          setOpenLoginModal(false);
          setNeedLogin(false);
        }}
      ></LoginModal>
      <PublishModal
        open={openPublishModal}
        onCancel={() => {
          setOpenPublishModal(false);
        }}
      ></PublishModal>
      <JoinModal
        open={openJoinModal}
        onCancel={() => {
          setOpenJoinModal(false);
        }}
      ></JoinModal>
    </div>
  );
}
