import { useEffect, useState } from "react";
import socket, { Socket } from "socket.io-client";

let client: Socket | null = null;

interface SocketProps {
	url: string;
	topic: string;
	history?: boolean;
}

export function useSocket({ url, topic, history }: SocketProps) {
	const [messages, setMessages] = useState<any[] | any>(history ? [] : null);

	useEffect(() => {
		if (!client) {
			client = socket(url, { transports: ["websocket"] });
			client.on("disconnect", () => {
				console.log("Disconnected");
				client = null;
			});
		}

		client.on("connect", () => {
			console.log("Connected to Web Socket");
		});

		client.on(topic, (data) => {
			setMessages((messages: any) =>
				history ? [...messages, data] : data
			);
		});

		return () => {
			if (client) client.disconnect();
		};
	}, [topic, history]);

	return messages;
}