import { useState, useCallback } from 'react';
// 全量引入工具函数
import { others } from 'fe-pro-utils';

function App() {
  // 轮询相关状态
  const [status, setStatus] = useState<string>('loading'); // loading, success, error

  // 模拟获取数据的函数
  const fetchSomeData = async () => {
    try {
      // 模拟异步数据获取
      await new Promise((resolve) => setTimeout(resolve, 1000));
      // const response = await fetch('/api/latest-data');
      // return await response.json();
      return { ready: true, data: '这是模拟的测试数据' };
    } catch (error) {
      console.error('数据获取失败:', error);
      return { error: true, ready: false };
    }
  };

  // 轮询回调函数 - 使用useCallback缓存
  const runCallback = useCallback(async () => {
    // 获取数据
    const result = await fetchSomeData();
    // 如果有错误，返回错误状态
    if (result.error) {
      return 'error';
    }
    // 判断是否继续轮询：数据准备好时停止轮询，否则继续
    return result.ready ? false : true;
  }, [fetchSomeData]); // 依赖fetchSomeData函数

  // 超时回调函数 - 使用useCallback缓存
  const timeOutCallback = useCallback(() => {
    console.log('轮询超时');
    setStatus('timeout');
  }, []); // 不依赖外部变量

  // 状态更新回调
  const handlePollingComplete = (pollStatus: string) => {
    console.log('轮询状态:', pollStatus);
    setStatus(pollStatus);
  };

  // 一、使用 others.polling 函数进行数据轮询
  others
    .polling({
      // 最大轮询次数
      max: 5,
      // 轮询回调函数
      runCallback,
      // 超时回调函数
      timeOutCallback,
      // 轮询间隔时间（毫秒）
      speed: 2000
    })
    .then(handlePollingComplete);
  // 其余工具函数的使用示例。。。

  return (
    <div>
      <h1>React 示例 - 工具函数演示</h1>
      <p>当前轮询状态: {status}</p>
    </div>
  );
}

export default App;