// WebSocketPlugin.js
// Socket connection을 관리하기 위한 전역 변수
let socket;

const WebSocketPlugin = {
  // Vue에서 플러그인을 사용하면 호출되는 함수
  install(Vue, options) {

    // 모든 Vue 인스턴스에서 사용 가능한 $connect 메소드를 정의
    // 이 메소드는 WebSocket connection을 시작합니다.
    Vue.prototype.$connect = function() {
      // WebSocket 객체를 생성하고, 주어진 url에 연결을 시작합니다.
      socket = new WebSocket(options.url);

      // 연결이 성공적으로 열릴 때 호출되는 이벤트 핸들러
      socket.onopen = function() {
        console.log("Connection opened!");
      };

      // 서버로부터 메시지를 받았을 때 호출되는 이벤트 핸들러
      socket.onmessage = function(event) {
        // 받은 메시지를 JSON으로 파싱하고 출력합니다.
        console.log("Received message: ", JSON.parse(event.data));
      };

      // 연결이 종료되었을 때 호출되는 이벤트 핸들러
      socket.onclose = function(e) {
        console.log("Connection closed!", e.reason);
        // 연결이 종료되면 주어진 interval 이후에 재연결을 시도합니다.
        setTimeout(Vue.prototype.$connect, options.autoReconnectInterval);
      };

      // 에러가 발생했을 때 호출되는 이벤트 핸들러
      socket.onerror = function(error) {
        console.log("WebSocket Error: ", error);
        // 에러 발생 시 소켓 연결을 종료합니다.
        socket.close();
      };
    };

    // 모든 Vue 인스턴스에서 사용 가능한 $sendMessage 메소드를 정의
    // 이 메소드는 서버에 메시지를 보냅니다.
    Vue.prototype.$sendMessage = function(message) {
      if (socket) {
        // 소켓 연결이 유효하다면, 메시지를 문자열 형태의 JSON으로 변환하여 보냅니다.
        socket.send(JSON.stringify(message));
      } else {
        // 소켓 연결이 없다면, 메시지를 보내지 못했음을 알립니다.
        console.log('Socket connection not established. Message not sent.');
      }
    };

    // 모든 Vue 인스턴스에서 사용 가능한 $closeConnection 메소드를 정의
    // 이 메소드는 WebSocket connection을 종료합니다.
    Vue.prototype.$closeConnection = function() {
      if (socket) {
        // 소켓 연결이 유효하다면, 연결을 종료합니다.
        socket.close();
      }
    };
  },
};

// 플러그인 객체를 내보냅니다.
export default WebSocketPlugin;