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

export const useSocketIO = (
	uri?: string | Partial<ManagerOptions & SocketOptions>,
	opts?: Partial<ManagerOptions & SocketOptions>
): [Socket] => {
	const [activeSocket, setActiveSocket] = useState<Socket>(null);

	useEffect(() => {
		const socket = io(uri, opts);

		const onConnect = () => {
			setActiveSocket(socket);
		};

		const onDisconnect = () => {
			setActiveSocket(null);
		};

		socket.on("connect", onConnect);
		socket.on("disconnect", onDisconnect);

		return () => {
			socket.removeListener("disconnect", onDisconnect);
			socket.removeListener("connect", onConnect);
			socket.disconnect();
		};
	}, []);

	return [activeSocket];
};

export function useEventIO<TypeData>(
	socket: Socket,
	eventName: string
): [TypeData, (...args: any[]) => void] {
	const [lastEvent, setLastEvent] = useState<TypeData>(null);

	const emit = (...args: any[]) => {
		if (!socket) {
			throw new Error("Socket is not defined");
		}
		socket.emit(eventName, ...args);
	};

	useEffect(() => {
		if (!socket) return;
		socket.on(eventName, setLastEvent);
		return () => {
			socket.removeListener(eventName, setLastEvent);
		};
	}, [socket]);

	return [lastEvent, emit];
}