import { Tag, Space, Badge, Modal } from 'antd';
import React, { useCallback } 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';

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


const GlobalHeaderRight: React.FC<{}> = () => {
  const { initialState } = useModel('@@initialState');
  const { state: { versionsOpen }, dispatch, getversions } = useModel('useOperating.useWxGroupList')
  if (!initialState || !initialState.settings) {
    return null;
  }

  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('不一样')
        }
      }
    })
  }, [])
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
      <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;
