import { useEffect, useRef, useState } from 'react';
import { connect } from 'umi';
import { ConfigProvider, Layout } from 'antd-v4';
import zhCN from 'antd-v4/lib/locale-provider/zh_CN';
import enUS from 'antd-v4/lib/locale-provider/en_US';
import zhTW from 'antd-v4/lib/locale-provider/zh_TW'; // 导入繁体中文语言包
// import Search from '../components/Common/Search';
import PersonCenter from './personCenter/personCenter';
import Feedback from './feedback/feedback';
import ProblemFeedback from './problemFeedback/problemFeedback';
import TabCon from './tab/tab';
import styles from './indexPage.less';

import moment from 'moment';
import 'moment/locale/zh-cn';

const { Header, Content } = Layout;

function IndexPage({ app }) {
  const [key, setKey] = useState(0);
  const currentLanguage = app?.userinfo?.sLanguage || 'zhCN'; // 默认为中文

  useEffect(() => {
    window.xlyReload = () => {
      setKey(pre => pre + 1);
    };
  }, []);

  const { webSocket, userinfo } = app;
  const { sId } = userinfo;
  const testMsg = JSON.stringify({ flag: "connectTest", sId: "test", sendFrom: sId });

  const timer = useRef(null);

  const { url } = webSocket || {};
  const wsRef = useRef(webSocket);
  const xlyWsTimerFun = () => {
    clearInterval(timer.current);
    // 重新启动定时器
    timer.current = setInterval(() => {
      if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
        wsRef.current.send(testMsg);
      }
    }, 20000);
  }
  useEffect(() => {
    if (url) {
      wsRef.current = webSocket;
      xlyWsTimerFun();
      window.xlyWsTimerFun = xlyWsTimerFun;
    }
    return () => {
      window.xlyWsTimerFun = null;
      clearInterval(timer.current);
    };
  }, [url]);

    // 根据用户语言选择对应的语言包
  const getLocale = () => {
    switch(currentLanguage) {
      case 'sEnglish':
        return enUS;
      case 'sBig5':
        return zhTW;
      default:
        {
          moment.locale('zh-cn');
          return zhCN;
        }
    }
  };

  return (
    <ConfigProvider locale={getLocale()}>
      <Layout key={key}>
        <Header className={styles.header}>
          <div className={styles.headerRight}>
            <div className={styles.personCenter}>
              <PersonCenter />
            </div>
            {/* <div className={styles.search}>
              <Search />
            </div> */}
          </div>
        </Header>
        <Content className={styles.content}>
          <TabCon />
        </Content>
        {/* <Footer className={styles.footer}>
         copyright ©2014-2017，All Rights Reserved 沪ICP备14034791号-2<br />
         版权所有上海小羚羊软件股份有限公司   咨询电话：400-880-6237
         </Footer> */}
      </Layout>
      { ['project.xlyprint.cn', 'localhost'].includes(location.hostname) ? <ProblemFeedback /> : <Feedback /> }
    </ConfigProvider>
  );
}

IndexPage.propTypes = {};

export default connect(({ app }) => ({ app }))(IndexPage);