import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { CloseOutlined, LogoutOutlined, SwapOutlined, SwapRightOutlined, UserOutlined } from '@ant-design/icons';
import { Avatar, MenuProps } from 'antd';
import globaStore from '../store/index'
import HeaderDropdown from '../components/HeaderDropdown';
import styles from './index.less';
import { toJS } from 'mobx';
import { useLocalObservable, observer } from 'mobx-react'
import useNewToken from '@/Hook/useNewToken';
export interface GlobalHeaderRightProps {
  config: any,
}
const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ config }) => {
  const store = useLocalObservable(() => globaStore)
  const [dialogVisible, setDialogVisible] = useState<boolean>(false)
  const [dOpen, setDopen] = useState(false)
  const ref1 = useRef(null);
  const [openTour, setOpenTour] = useState<boolean>(false);
  const { token } = useNewToken()
  const userInfo: any = useMemo(() => {
    return toJS(store.data.userInfo)
  }, [store.data.userInfo])
  const onMenuClick = useCallback(
    (event: any) => {
      const { key } = event;
      if (key === 'logout') {
        store.loginOut();
        return;
      }
      if (key === 'company') {
        setDialogVisible(() => true)
        return
      }
    },
    [],
  );

  const items: MenuProps['items'] = [
    {
      icon: <SwapOutlined />,
      key: 'company',
      label: '切换公司'
    },
    {
      icon: <LogoutOutlined />,
      key: 'logout',
      label: '退出登录'
    }]
  //是否首次打开平台
  useEffect(() => {
    let isOneOpen = localStorage.getItem('isOneOpen')
    let isPhone = sessionStorage.getItem('isPhone')
    if (!isOneOpen && !openTour && !isPhone) {
      setOpenTour(true)
    }
  }, [])
  //新增字体样式
  function addStyle() {
    const styleElement = document.createElement('style');
    styleElement.textContent = '* { font-family: cursive !important; }';
    styleElement.id = 'fontfamilystyle'
    document.head.appendChild(styleElement);
  }
  //删除字体样式
  function removeStyle() {
    const styleElement = document.getElementById('fontfamilystyle');
    if (styleElement) {
      document.head.removeChild(styleElement);
    }
  }
  useEffect(() => {
    console.log("config.fontfamilystyle===>", config.fontfamilystyle)
    if (config.fontfamilystyle) {
      addStyle()
    } else {
      removeStyle()
    }
  }, [config.fontfamilystyle])

  return (
    <>
      <HeaderDropdown menu={{ items, onClick: onMenuClick }} overlayStyle={{ background: token.colortRansparency, borderRadius: token.borderRadius }} onOpenChange={(open) => {
        setDopen(open)
      }} open={dOpen} >
        <span className={`${styles.action} ${styles.account}`} ref={ref1}>
          <Avatar className={styles.avatar} src={userInfo?.dingTalkUserList?.[0]?.avatar || config?.myBgUrl || config?.bgUrl[config.acPrimary]} style={{ backgroundColor: '#fde3cf', color: '#f56a00' }} icon={<UserOutlined />} alt="avatar" />
          <span className={`${styles.name} anticon`} style={localStorage.getItem("showGx") != '1' ? { color: '#fff' } : { color: '#fff' }}>{userInfo?.nickname}</span>
        </span>
      </HeaderDropdown>
      <div className={styles.dialog} style={{ display: dialogVisible ? 'block' : 'none' }}>
        <div className={styles.companyAccount}>
          <div className={styles.close} onClick={() => { setDialogVisible(false) }}><CloseOutlined style={{ color: '#000' }} /></div>
          <h3>切换公司账户</h3>
          <div className={styles.chooseTableBlock}>
            {toJS(store.data.companyList)?.map((item: any) => {
              if (item.companyId != store.data.userInfo?.onlineCompanyId) {
                return <div className={`${styles.acTableLineContent} ${styles.acTableLine}`} key={item?.companyId} onClick={() => { store.selectCompany(item?.companyId) }}>
                  <div className={styles.actname}>{item?.companyInfo?.companyName}</div>
                  <div className={styles.right}> <div className={styles.actcha}>{item?.powerLevel === 999 ? '超级管理员' : item?.powerLevel === 100 ? '系统管理员' : item?.powerLevel === 99 ? '管理员' : '普通用户'}</div> <SwapRightOutlined className={styles.iconRight} /></div>
                </div>
              } else {
                return <div className={`${styles.acTableLineContent} ${styles.acNone}`} key={item?.companyId}>
                  <div className={styles.actname}>{item?.companyInfo?.companyName}</div>
                  <div className={styles.right}> <div className={styles.actcha}>{item?.powerLevel === 999 ? '超级管理员' : item?.powerLevel === 100 ? '系统管理员' : item?.powerLevel === 99 ? '管理员' : '普通用户'}</div> <SwapRightOutlined className={styles.iconRight} /></div>
                </div>
              }
            })}
          </div>
        </div>
      </div>
    </ >
  );
};

export default observer(AvatarDropdown);