import { EditOutlined } from '@ant-design/icons';
import { Space, Affix, Button } from 'antd';
import React, { useState } from 'react';
import { FormattedMessage, SelectLang, useModel } from 'umi';
import { UAParser } from 'ua-parser-js';
// import HeaderSearch from '../HeaderSearch';
import Avatar from './AvatarDropdown';
import styles from './index.less';
import AdminDropdown from './AdminDropdown';
import Help from './Help';
import Notification from './Notification';
import Country from './Country';
import { BrowserWarningModal } from './BrowserWarningModal';

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

const GlobalHeaderRight: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const [container, setContainer] = useState<HTMLDivElement | null>(null);
  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}`;
  }
  const browser = new UAParser()?.getBrowser();
  const browserVersion: number = browser?.major ? parseInt(browser?.major) : 0;
  const browserName: string = browser?.name || '';
  const browserWarning = {
    Chrome: 59,
    Firefox: 53,
    Safari: 11,
    Edge: 17,
  };

  return (
    <Space className={className}>
      {browserWarning[browserName] > browserVersion ? <BrowserWarningModal /> : null}
      <AdminDropdown />
      <Avatar />
      {initialState?.settings?.isCN ? (
        <>
          <Help />
          <SelectLang
            className={styles.action}
            // @ts-ignore
            postLocalesData={(args) => {
              return args?.map((arg) => {
                return { ...arg, icon: null };
              });
            }}
          />
        </>
      ) : null}
      <Notification />
      <Country />
      <div ref={setContainer}>
        <Affix target={() => container} offsetTop={500}>
          <div
            style={{
              width: 24,
              lineHeight: '24px',
              textAlign: 'center',
              borderRadius: '12px',
              marginTop: '300px',
              backgroundColor: '#F16622',
              color: '#fff',
              cursor: 'pointer',
            }}
            onClick={() => {
              window.open(initialState?.settings?.npxUrl, '_blank');
            }}
          >
            <EditOutlined />
            <FormattedMessage id="pages.help.feedback" defaultMessage="反馈问卷" />
          </div>
        </Affix>
      </div>
    </Space>
  );
};
export default GlobalHeaderRight;