import { sessionGet } from '@/utils/cache-session-utils';
import { getToken } from './auth-token';
import { localGet } from '@/utils/cache-local-utils';
import { CACHE_LOCAL_I18N } from '@/constants/cache-keys-constants';
import { TOKEN_RESPONSE_FIELD } from '@/constants/token-constants';

/**连接参数类型 */
export type OptionsType = {
  /**WebSocket服务器将响应的URL */
  url?: string;
  /**地址栏参数 */
  params?: Record<string, string | number | boolean | undefined>;
  /**onopen事件的回调函数 */
  onopen?: Function;
  /**message事件的回调函数 */
  onmessage: (data: Record<string, any>) => void;
  /**error事件的回调函数 */
  onerror: Function;
  /**close事件的回调函数 */
  onclose?: Function;
  /**心跳周期 若为0则不启用 */
  heartTimer?: number;
  /**重连等待 若为0则不启用 */
  reconnectTimer?: number;
};

/**
 * WebSocket 使用方法
 *
 * import WS from '@/plugins/ws-websocket.ts';
 * const options = {
 *  url: 'ws://127.0.0.1:8080',
 *  onmessage: (res) => {
 *      // 接收数据后回调
 *  },
 *  // 保活周期 10s
 *  timer: 10000,
 *  // 断线重连
 *  reconnect: true,
 * };
 * const ws = new WS(options);
 *
 * 手动关闭
 * ws.close();
 */
export class WS {
  /**ws 实例 */
  private ws: WebSocket | null = null;
  /**ws 连接参数 */
  private options: OptionsType | null = null;
  /**心跳调度器 */
  private heartInterval: number = 0;
  /**重连定时器 */
  private reconnectTimeout: number = 0;

  /**
   * 构造函数
   * @param {object} params 构造函数参数
   */
  constructor(options: OptionsType) {
    if (!window.WebSocket) {
      // 检测浏览器支持
      console.error('抱歉！ 浏览器不支持websocket');
      return;
    }
    this.options = options;
    this.create(options);
  }

  /**
   * 创建链接
   * @param {object} options 连接参数
   */
  public create(options: OptionsType) {
    try {
      if (!options.url) {
        // 兼容旧前端可改配置文件
        const wsUrl = import.meta.env.PROD
          ? sessionGet('wsUrl') || import.meta.env.VITE_API_BASE_URL
          : '/socket';
        if (wsUrl.startsWith('ws')) {
          options.url = `${wsUrl}/ws`;
        } else if (wsUrl.startsWith('https')) {
          options.url = `${wsUrl.replace('https', 'wss')}/ws`;
        } else if (wsUrl.startsWith('http')) {
          options.url = `${wsUrl.replace('http', 'ws')}/ws`;
        } else {
          const protocol =
            window.location.protocol === 'https:' ? 'wss://' : 'ws://';
          options.url = `${protocol}${location.host}${wsUrl}/ws`;
        }

        // 地址栏参数
        let params = options.params || {};
        // 设置 token
        const token = getToken();
        if (token) {
          params[TOKEN_RESPONSE_FIELD] = token;
        }
        // 多语言处理
        params['language'] = localGet(CACHE_LOCAL_I18N) || 'en_US';
        let paramStr = '';
        for (const key in params) {
          const value = params[key];
          // 空字符或未定义的值不作为参数发送
          if (value === '' || value === undefined) continue;
          paramStr += `&${encodeURIComponent(key)}=${encodeURIComponent(
            value
          )}`;
        }
        if (paramStr && paramStr.startsWith('&')) {
          options.url = `${options.url}?${paramStr.substring(1)}`;
        }
      }

      const ws = new WebSocket(options.url, 'omc-ws');
      // 用于指定连接成功后的回调函数。
      ws.onopen = ev => {
        if (options.heartTimer && options.heartTimer > 0) {
          this.heartCheck(options.heartTimer);
        }
        if (typeof options.onopen === 'function') {
          options.onopen(ev);
        }
      };
      // 用于指定当从服务器接受到信息时的回调函数。
      ws.onmessage = ev => {
        const data = ev.data;
        // 解析文本消息
        if (ev.type === 'message') {
          try {
            const jsonData = JSON.parse(data);
            if (typeof options.onmessage === 'function') {
              options.onmessage(jsonData);
            }
          } catch (error) {
            console.error('websocket 消息格式错误', error);
          }
        }
      };
      // 用于指定连接关闭后的回调函数。
      ws.onclose = ev => {
        if (typeof options.onclose === 'function') {
          options.onclose(ev);
        }
      };
      // 用于指定连接失败后的回调函数。
      ws.onerror = ev => {
        console.error('websocket 连接异常', ev);

        if (typeof options.onerror === 'function') {
          options.onerror(ev);
        }
        if (options.reconnectTimer && options.reconnectTimer > 0) {
          this.reconnect(options.reconnectTimer);
        }
      };
      this.ws = ws;
    } catch (error) {
      if (typeof options.onerror === 'function') {
        options.onerror(error);
      }
      if (options.reconnectTimer && options.reconnectTimer > 0) {
        this.reconnect(options.reconnectTimer);
      }
    }
  }

  // 发送消息
  public send(data: Record<string, any>) {
    if (!this.ws) {
      console.warn('websocket 不可用');
      return;
    }
    console.log(' readyState', this.ws.readyState);
    if (
      this.ws.readyState === WebSocket.CLOSED ||
      this.ws.readyState === WebSocket.CLOSING
    ) {
      this.close();
      return;
    }

    this.ws.send(JSON.stringify(data));
  }

  // 手动关闭socket
  public close() {
    this.heartInterval && clearInterval(this.heartInterval);
    this.reconnectTimeout && clearTimeout(this.reconnectTimeout);
    if (!this.ws) {
      console.warn('websocket 不可用');
      return;
    }
    this.ws.close(WebSocket.CLOSED);
  }

  // 周期性发送ping 保活
  private heartCheck(heartTimer: number) {
    this.heartInterval = window.setInterval(() => {
      this.send({
        type: 'ping',
      });
    }, heartTimer);
  }

  // 断线重连
  private reconnect(reconnectTimer: number) {
    if (this.reconnectTimeout > 0) return;
    clearTimeout(this.reconnectTimeout);
    this.reconnectTimeout = window.setTimeout(() => {
      if (this.options) {
        this.create(this.options);
        this.reconnectTimeout = 0;
      }
    }, reconnectTimer);
  }
}
