import { useEffect } from 'react';
import { socket } from '@/socket';
import throttle from '@/tools/throttle';

import { thirtyFPS } from '@/constants/time';
import type { GameUpdate, Tilt } from '@/types';

interface UseSocketProps {
	gameID: string;
	setGameData: (gameUpdate: GameUpdate) => void;
	setNoGame: (noGame: boolean) => void;
}

export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketProps) {
	useEffect(() => {
		if (gameID) {
			socket.emit('join', gameID);

			socket.on('init', (data: GameUpdate) => {
				setGameData(data);
			});

			socket.on('game-update', (data: GameUpdate) => {
				setGameData(data);
			});

			socket.on('join-error', (error) => {
				console.error('Error:', error);
				setNoGame(true);
			});

			socket.on('flip-error', (error) => {
				console.error('Error:', error);
			});
		}

		return () => {
			socket.removeAllListeners();
		};
	}, [gameID]);

	const emitFlip = (cardIndex: number) => {
		socket.emit('flip-card', {
			gameID,
			cardIndex,
		});
	};

	const emitSettings = (gameData: GameUpdate) => {
		socket.emit('settings', {
			gameID,
			gameData,
		});
	};

	const emitRedraw = (cardIndex: number) => {
		socket.emit('redraw', {
			gameID,
			cardIndex,
		});
	};

	const emitSelect = (cardIndex: number, cardID: string) => {
		socket.emit('select', {
			gameID,
			cardIndex,
			cardID,
		});
	};

	const emitTilt = throttle((cardIndex: number, tilt: Tilt) => {
		socket.emit('tilt', {
			cardIndex,
			tilt,
		});
	}, thirtyFPS);

	return {
		emitFlip,
		emitSettings,
		emitRedraw,
		emitSelect,
		emitTilt,
	};
}