import { defineStore } from 'pinia';
import { store } from '@/store';
import { useGlobSetting } from '@/hooks/setting';
import { useWebSocket } from '@vueuse/core';
import { getToken } from '@/utils/auth';
import { tabListData, TabItem } from '@/layouts/default/header/components/notify/data';
import { useUserStoreWithOut } from '@/store/modules/user';
import dayjs from 'dayjs';
import { isUrl } from '@/utils/is';
import { useMessage } from '@/hooks/web/useMessage';

interface NotifyState {
  listData: TabItem[];
}

const { notification } = useMessage();
export const useNotifyStore = defineStore('notify', {
  state: (): NotifyState => ({
    listData: tabListData,
  }),
  getters: {
    // 当前用户所有消息的数量
    count(state) {
      const userStore = useUserStoreWithOut();
      const uid = userStore.userInfo?.userId || 0;
      let count = 0;
      for (let i = 0; i < state.listData.length; i++) {
        count += state.listData[i].list.filter((item) => item.uid === uid).length;
      }
      return count;
    },
    // 当前用户所有未读消息数量
    unreadCount(state) {
      const userStore = useUserStoreWithOut();
      const uid = userStore.userInfo?.userId || 0;
      let count = 0;
      for (let i = 0; i < state.listData.length; i++) {
        // 这里显示消息数量 使用删除线作为条件
        // 只显示当前用户的消息
        count += state.listData[i].list.filter(
          (item) => item.uid === uid && !item.titleDelete,
        ).length;
      }
      return count;
    },
    // 所有消息 根据uid显示
    userMessageList(state): TabItem[] {
      const userStore = useUserStoreWithOut();
      const uid = userStore.userInfo?.userId || 0;
      return state.listData.map((item) => {
        return {
          ...item,
          list: item.list.filter((item) => item.uid === uid),
        };
      });
    },
  },
  actions: {
    listeningMessage() {
      // 从配置文件获取的为String类型
      const { websocketEnable } = useGlobSetting();
      if (!websocketEnable) {
        console.log('当前未开启websocket.');
        return;
      }
      const { apiUrl, clientId } = useGlobSetting();
      let apiUrlStr = String(apiUrl);
      /**
       * 这里可能有两种情况 兼容dev模式的proxy或者prod模式但是没有用全路径比如http://xxx/xxx
       * 1. apiUrl为https://xxx.com/xxx
       * 2. apiUrl为/xxx
       * 转换后为http链接形式
       */
      if (!isUrl(apiUrl)) {
        // 协议+域名
        apiUrlStr = `${window.location.protocol}//${window.location.host}${apiUrl}`;
      }
      // 这里是http链接形式
      let websocketAddr = `${apiUrlStr}/resource/websocket?clientid=${clientId}&Authorization=Bearer ${getToken()}`;
      // http/https处理
      if (window.location.protocol.includes('https')) {
        websocketAddr = websocketAddr.replace('https://', 'wss://');
      } else {
        websocketAddr = websocketAddr.replace('http://', 'ws://');
      }
      // console.log('websocketUrl: ' + websocketAddr);

      /**
       * 功能太强大了 自动重连  自动发送心跳  连退出登录自动断开都做了
       */
      useWebSocket(websocketAddr, {
        autoReconnect: {
          // 重连最大次数
          retries: 3,
          // 重连间隔
          delay: 1000,
          onFailed() {
            console.log('websocket重连失败.');
          },
        },
        heartbeat: {
          message: JSON.stringify({ type: 'ping' }),
          // 发送心跳的间隔
          interval: 10000,
          // 接收到心跳response的超时时间
          pongTimeout: 2000,
        },
        onConnected() {
          console.log('websocket已经连接');
        },
        onDisconnected() {
          console.log('websocket已经断开');
        },
        onMessage: (_, message) => {
          console.log('接收到消息: ' + message.data);
          // 需要id不同 否则list foreach会有bug
          const id = 'notify-' + this.listData[0].list.length;
          // 获取uid
          const uid = useUserStoreWithOut().userInfo?.userId || 0;
          // 添加到通知就是第一个index
          this.listData[0].list.unshift({
            id,
            uid,
            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
            title: message.data,
            description: '',
            datetime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
            type: '1',
          });
          /** 必须使用setTimeout 才能正常显示 */
          setTimeout(() => {
            notification.info({
              message: '收到新消息',
              description: '欢迎登录荣君安电梯云平台',
              duration: 3,
            });
          }, 500);
        },
      });
    },
    clearAll() {
      const userStore = useUserStoreWithOut();
      const uid = userStore.userInfo?.userId || 0;
      /**
       * 去掉当前用户的所有消息
       */
      this.listData = this.listData.map((item) => {
        return {
          ...item,
          list: item.list.filter((node) => node.uid !== uid),
        };
      });
    },
    readAll() {
      const userStore = useUserStoreWithOut();
      const uid = userStore.userInfo?.userId || 0;
      for (let i = 0; i < this.listData.length; i++) {
        this.listData[i].list.forEach((item) => {
          if (item.uid === uid) {
            item.read = true;
            item.titleDelete = true;
          }
        });
      }
    },
  },
  persist: true,
});

export function useNotifyStoreWithOut() {
  return useNotifyStore(store);
}
