import React, { useEffect, useState, useRef } from "react";
import baseRequest from "@/utils/baseRequest";
import { connect } from "react-redux";
import { get } from "@/utils/storeInfo";
const WebSocketComponent = ({ getData, authInfo }) => {
  const [messages, setMessages] = useState([]);
  // const [pending, startTransition] = useTransition();
  const socketRef = useRef(null);
  useEffect(() => {
    let interval = null;
    const account = get("account");
    function connect_socket() {
      const base = baseRequest();

      if (socketRef.current && socketRef.current.readyState === 1) return;
      // 创建WebSocket连接
      if (!socketRef.current && account)
        socketRef.current = new WebSocket(
          `${process.env.NEXT_PUBLIC_WEBSOCKET_URL}/ws?b_mid=${base.b_mid}&b_dt=1&b_token=${base.b_token}&b-ch=h5`
        );

      // 响应服务器的 ping
      // socketRef.current.on("ping", () => {
      //   socketRef.current.send("pong");
      // });
    }
    if (!account && socketRef.current) {
      socketRef.current.close();
      socketRef.current = null;
      return;
    }
    connect_socket();
    if (socketRef.current) {
      // 注意使用wss协议（如果服务器支持）
      // 连接打开时触发
      socketRef.current.onopen = () => {
        // console.log("WebSocket connected.", socketRef.current.readyState);
        // 可以在这里发送消息到服务器，例如：socket.send('Hello Server!');
        socketRef.current.send(JSON.stringify({ t: 1 }));
      };
      // 处理收到的消息
      socketRef.current.onmessage = (event) => {
        if (Object.prototype.toString.call(event.data) === "[object Blob]") {
          var reader = new FileReader();
          reader.readAsText(event.data, "utf-8");
          reader.onload = function (e) {
            try {
              const data = JSON.parse(reader.result);
              if (data.t === 2 && data.msg.ping_interval) {
                socketRef.current.send("ping");
                interval = setInterval(() => {
                  // 发送 ping 给服务器
                  socketRef.current.send("ping");
                  // 响应服务器的 ping
                  // socketRef.current.on("ping", () => {
                  //   socketRef.current.send("pong");
                  // });
                }, data.msg.ping_interval * 1000);
              }
              if (data.t === 3) {
                getData(data.msg);
                setMessages((prevMessages) => [...prevMessages, data]);
              }
            } catch (error) {}
          };
        }
      };

      // 连接关闭时触发
      socketRef.current.onclose = () => {
        clearInterval(interval);
        connect_socket();
        // console.log("WebSocket disconnected.");
      };
      // 连接错误时触发
      socketRef.current.onerror = (error) => {
        // console.error("WebSocket error:", error);
      };
    }
    // 组件卸载时关闭WebSocket连接
    return () => {
      // console.log("state", socketRef.current.readyState);
      if (socketRef.current)
        socketRef.current?.readyState === WebSocket.OPEN &&
          socketRef.current?.close();
      clearInterval(interval);
    };
  }, [authInfo]); // 空依赖数组表示这个effect只在组件挂载时运行一次
  // return <Error statusCode={500} />;
  return (
    <div>
      {/* <Text style={{ fontSize: 24, fontWeight: 'bold' }}>WebSocket Messages</Text>
      <FlatList
        data={messages}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => <Text>{item}</Text>}
      /> */}
    </div>
  );
};

const mapStateToProps = ({ reducer }) => {
  return {
    authInfo: reducer.authInfo,
  };
};
export default connect(mapStateToProps, null)(WebSocketComponent);