import { ref, onMounted, onUnmounted } from "vue";

export function useWebSocket(url) {
  const socket = ref(null);
  const messages = ref([]);
  const isConnected = ref(false);
  const error = ref(null);

  function connect() {
    socket.value = new WebSocket(url);

    socket.value.onopen = () => {
      isConnected.value = true;
      console.log("WebSocket connected");
    };

    socket.value.onmessage = (event) => {
      try {
        const data = JSON.parse(event.data);
        messages.value.push(data);
      } catch (e) {
        console.error("Failed to parse message", e);
      }
    };

    socket.value.onerror = (event) => {
      error.value = "WebSocket error";
      console.error("WebSocket error", event);
    };

    socket.value.onclose = () => {
      isConnected.value = false;
      console.log("WebSocket disconnected");
    };
  }

  function sendMessage(message) {
    if (socket.value && isConnected.value) {
      socket.value.send(JSON.stringify(message));
    } else {
      console.warn("WebSocket is not connected");
    }
  }

  onMounted(() => {
    connect();
  });

  onUnmounted(() => {
    if (socket.value) {
      socket.value.close();
    }
  });

  return {
    socket,
    messages,
    isConnected,
    error,
    sendMessage,
  };
}