import React, {useEffect} from 'react';
import SocketStart from '@containers/socket';
import UserCache from '@caches/UserCache';
import {useSelector} from 'react-redux';
import './style.less';

interface IProps {
  prefixCls: string;
}

interface SocketItem {
  key: string;
  payload?: any;
}

const Demo: React.FC<IProps> = (props) => {
  const {prefixCls} = props;
  const webSocket = useSelector((state: any) => state.common.webSocket);

  // 常量：根据需求，订阅相应 socket 事件
  const socketArr: SocketItem[] = [
    {
      key: 'common.sub',
      payload: {
        filter: 'wf_deal_deviation_monitor_filter',
        gatewayToken: UserCache.user.gatewayToken,
        subscribeType: 'SUB',
        userId: UserCache.user.userId
      }
    }
  ];

  // 处理 socket 数据
  const dealSocketData = (event) => {
    console.log('开始处理 推送消息 - event', event);
  };

  // socket 挂载
  useEffect(() => {
    SocketStart({...webSocket, socketArr, onMessage: dealSocketData});
  }, []);

  return (
    <div className={`${prefixCls}-demo`}>
      <p>Sumscope Web App</p>
    </div>
  );
};

export default Demo;