import { Tag, Space, Badge, Modal } from 'antd';
import React, { useCallback, useEffect, useState } from 'react';
import { useModel } from 'umi';
import Avatar from './AvatarDropdown';
import styles from './index.less';
import { exitFullScreen, requestFullScreen, isFull } from '@/utils/fullScreen'
import { BellOutlined } from '@ant-design/icons';
import { ReactComponent as GameSvg } from '@/assets/game.svg'
import { ReactComponent as BiSvg } from '@/assets/bi.svg'

export type SiderTheme = 'light' | 'dark';


const GlobalHeaderRight: React.FC<{}> = () => {

  const [left, setLeft] = useState(0)
  const { initialState } = useModel('@@initialState');
  const { state: { versionsOpen }, dispatch, getversions } = useModel('useOperating.useWxGroupList')
  if (!initialState || !initialState.settings) {
    return null;
  }

  useEffect(() => {
    let nav: any = document.querySelector('.top-nav-menu')
    let navLi: any = document.querySelectorAll('.top-nav-menu > li')
    if (nav && navLi) {
      let l = nav.offsetLeft
      let lw = 0
      for (const iterator of navLi) {
        lw += iterator.offsetWidth
      }
      setLeft(l + lw - 50)
    }
  }, [])

  const { navTheme, layout } = initialState.settings;
  let className = styles.right;

  if ((navTheme === 'dark' && layout === 'top') || layout === 'mix') {
    className = `${styles.right}  ${styles.dark}`;
  }
  let handleFullScreen = () => {
    if (isFull()) {
      exitFullScreen()
    } else {
      requestFullScreen()
    }
  }
  //消息弹窗更新
  const inform = useCallback(() => {
    let bdVersions = localStorage.getItem('versions') //本地
    getversions.run().then((res) => {
      let fwqVersions = ''//服务器版本
      let content: any = ''//版本更新内容
      if (res) {
        fwqVersions = res?.configValue
        content = <div dangerouslySetInnerHTML={{ __html: res?.remark?.replace(/\n/ig, '<br/>') }}></div >
        if (fwqVersions && bdVersions !== fwqVersions) {//不一样
          //执行逻辑
          Modal.confirm({
            title: '版本更新！',
            content,
            keyboard: false,
            cancelText: '稍后我自己刷新页面',
            okText: '现在就去刷新页面',
            onOk: () => {
              localStorage.setItem('versions', fwqVersions)//重新设置服务器版本
              location?.reload()
            },
            onCancel: () => {
              dispatch({ type: 'versionsOpen', params: { versionsOpen: true } })
            }
          })
          console.log('不一样')
        }
      }
    })
  }, [])

  const open = () => {
    let token = localStorage.getItem('Admin-Token')
    window.open(`http://gg.84game.cn/#/login?token=${token}`)
    return
  }

  return (
    <div style={{ display: 'flex', justifyContent: 'space-between' }}>

      <div style={{ left: left }} className={styles.extraSys}>
        <Space onClick={open}>
          <span role="img" aria-label="fund-view" className="anticon anticon-fund-view"><GameSvg /></span>
          <span style={{ color: 'rgba(255, 255, 255, 0.65)' }}>游戏SDK</span>
        </Space>
        <Space onClick={() => window.open(`https://bi.aliyun.com/product/view.htm?module=dashboard&productId=396f5cf7-9d50-4dde-9aaa-eb20e2590518&menuId=74f4c115-db5a-457c-b25b-94bdafc172fe`)}>
          <span role="img" aria-label="fund-view" className="anticon anticon-fund-view"><BiSvg /></span>
          <span style={{ color: 'rgba(255, 255, 255, 0.65)' }}>BI商业分析</span>
        </Space>
      </div>

      <Space className={className}>
        {versionsOpen && <div onClick={versionsOpen && inform}>
          <Badge count={versionsOpen && 1} size='small' offset={[2, 0]}>
            <span style={{ cursor: 'pointer' }} ><BellOutlined /></span>
          </Badge>
        </div>}
        <Avatar />
        <Tag color="#87d068" onClick={handleFullScreen}>全屏模式</Tag>
      </Space>
    </div>
  );
};
export default GlobalHeaderRight;
