import React, { useEffect,useState,useCallback ,useRef} from 'react';
import { inject, observer } from 'mobx-react';
export const NoActivityTimeoutContext = React.createContext();

// 创建一个用于管理全局计时器的高阶组件
const withNoActivityTimeout = (Component) => {
    const WithTimeout = (props) => {
      const MAX_INACTIVE_TIME = 5 *  1000; // 5分钟，单位毫秒60 *
      const timerRef = useRef(null);
      
      const resetTimer = useCallback(() => {
        if (timerRef.current) clearTimeout(timerRef.current);
        timerRef.current = setTimeout(() => {
          props.app?.updateActivityStatus(false);
          props.onTimeout()
        }, MAX_INACTIVE_TIME);
      }, [ props.onTimeout]);

      useEffect(() => {
        // 当组件挂载时开始计时
        // 监听鼠标移动事件来重置计时器
        // window.addEventListener('mousemove', resetTimer);
        window.addEventListener('mousemove', resetTimer);
        // 组件卸载时清除计时器和事件监听
        return () => {
          clearTimeout(timerRef.current);
          window.removeEventListener('mousemove', resetTimer);
        };
      }, [props.app]);
  
      // 鼠标移动时，如果提示显示，则隐藏提示
      const handleMouseMove = (callback) => {
        console.log(timerRef.current,"handleMouseMove")
        props.app?.updateActivityStatus(true);
        resetTimer();
        callback&&callback();
      };

      const contextValue = {
        
        handleMouseMove
      };
      return (
        <>
          <NoActivityTimeoutContext.Provider value={contextValue}>
            <Component {...props} isPromptVisible={true} hide={handleMouseMove} >
            </Component>
          </NoActivityTimeoutContext.Provider>
        </>
      );
    };
  
    return inject('app')(observer(WithTimeout));
  };
  
export default   withNoActivityTimeout ;