import React, { useState } from 'react';
import { RobotMap, RoomProperty } from '@ray-js/robot-map';
import { useP2PDataStream } from '@ray-js/robot-data-stream';
import { useDevice } from '@ray-js/ray';

const RobotVacuumPanel = () => {
  const { devId } = useDevice(device => device.devInfo);

  // 地图和路径数据状态（通常来自 P2P 通道）
  const [mapData, setMapData] = useState<string>('');
  const [pathData, setPathData] = useState<string>('');

  // 房间属性数据（通常来自 MQTT 通道，结构化协议）
  const [roomProperties, setRoomProperties] = useState<RoomProperty[]>([]);

  // P2P 数据流处理
  const onMapData = (mapDataStr: string) => {
    // 处理地图数据
    setMapData(mapDataStr);
  };

  const onPathData = (pathDataStr: string) => {
    // 处理路径数据
    setPathData(pathDataStr);
  };

  // 使用 P2P 数据流获取地图和路径数据
  useP2PDataStream(devId, onMapData, onPathData);

  // 示例：房间属性数据结构（实际使用时从 MQTT 通道获取）
  // const roomProperties: RoomProperty[] = [
  //   {
  //     id: 1,
  //     name: '客厅',
  //     cleanTimes: 2,
  //     order: 1,
  //     floorType: 0,
  //     yMop: 1,
  //     suction: 0,
  //     cistern: 0,
  //     cleanMode: 0,
  //   },
  // ];

  // 地图准备就绪回调
  const handleMapReady = (mapApi) => {
    console.log('地图已准备就绪', mapApi);
  };

  return (
    <RobotMap
      map={mapData}
      path={pathData}
      roomProperties={roomProperties}
      onMapReady={handleMapReady}
    />
  );
};