import { useCallback, useEffect } from "react";
import { ensureTopicData, fromServerMessage } from "@/utils/common";
import { EVENT_WS_MESSAGE } from "@/utils/constants";
import { App } from "antd";

export const useServerMessageHandler = () => {
  const { notification } = App.useApp();
  const processCustomEvent = useCallback(async (msg: string) => {
    const { topic, data } = fromServerMessage(msg);
    console.debug('Handle ws message, topic: %s', topic, data);
    switch (topic) {
      case "MEMBER_CHANGE": {
        break;
      }
      case "MY_CLIENT_ONLINE": {
        break;
      }
      case "DEBUG_MSG":
        break;
      case "EVENT_MEMBER_CHANGE":
      case "MSG": {
        const msgData = ensureTopicData<'MSG'>(data);
        const hasPermission = await Notification.requestPermission();
        if (hasPermission === 'granted') {
          const options = {
            body: `有新的消息`,
            icon: "https://example.com/icon.png", // 通知图标
            badge: "https://example.com/badge.png", // 移动端状态栏图标
            tag: `MSG`, // 相同 tag 的通知会覆盖，防止刷屏
            renotify: true    // 覆盖旧通知时是否再次振动/提醒
          };
          new Notification("新消息提醒", options);
          return;
        }
        notification.info({
          key: 'MSG',
          title: 'You have a new message',
          description: `from: ${msgData?.name}`
        });
        break;
      }
      case "SERVER_PUSH": {
        const { title, options = {} } = ensureTopicData<'SERVER_PUSH'>(data) ?? {};
        break;
      }
      default:
        break;
    }
  }, []);
  useEffect(() => {
    const handler = (e: Event) => {
      const { message } = (e as CustomEvent).detail;
      processCustomEvent(message);
    };
    window.addEventListener(EVENT_WS_MESSAGE, handler);
    return () => window.removeEventListener(EVENT_WS_MESSAGE, handler);
  }, [processCustomEvent]);
};