import { useEffect, useState } from 'react';
import RTCPeer from '@/lib/RTCPeer';

import type { UseSocket } from '@/hooks/useSocket';

import type {} from '@/types';

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

const channelName = 'tilt';

export default function useRTC({
	ready,
	registerAnsweredReceiver,
	registerOfferredReceiver,
	rtcAnswer: sendAnswer,
	rtcOffer: sendOffer,
}: UseSocket) {
	const [peers, setPeers] = useState<RTCPeer[]>([]);

	const answerHandler = (answer: RTCSessionDescriptionInit) => {
		console.log('[useRTC] answer received', answer);
		console.log('[useRTC] peers:', peers.length);
		const peer = peers[0];
		console.log('peer:', peer);
		peer.onAnswer(answer);
	};

	const offerHandler = (offer: RTCSessionDescriptionInit) => {
		console.log('[useRTC] offer received', offer);
		setPeers((peers) => {
			peers.push(new RTCPeer({ channelName, offer, sendAnswer, sendOffer }));
			return peers;
		});
	};

	useEffect(() => {
		if (ready) {
			console.log('-=-= SETTING THINGS UP =-=-');
			registerAnsweredReceiver(answerHandler);
			registerOfferredReceiver(offerHandler);

			setPeers([new RTCPeer({ channelName, sendAnswer, sendOffer })]);
		}
	}, [ready]);

	return {
		count: peers.length,
	};
}