import { render, html } from '/uhtml.js';
import loadStreams from '/stream.js';

let instance;
let thread;
let connection;
let mediaStream;

function loadCall() {
	let div = document.getElementById('call');
	div.innerHTML = '';
	render(div, html.node`
		<div id='users'></div>
		<p id='noone'>no one is in call</p>
		<button id='join' onclick=${async function(event) {
			if (instance) {
				connection.close();
				instance.emit('leave', { thread }, msg => {
					if (!msg.success)
						console.log('leave error:', msg.message);
				});
				instance = null;
				if (thread === currentThread.id) {
					this.innerText = 'join';
					return;
				}
			}
			mediaStream = await navigator.mediaDevices.getUserMedia({
				audio: {
					autoGainControl: true,
					echoCancellation: true,
					noiseSuppression: true,
					sampleRate: 48000,
					sampleSize: 16
				}
			});
			if (!mediaStream) {
				console.log("couldn't get media stream");
				return;
			}
			this.innerText = 'leave';
			instance = currentInstance;
			thread = currentThread.id;
			connection = new RTCPeerConnection();
			connection.addTrack(mediaStream.getTracks()[0]);
			instance.emit('join', {
				thread
			}, async msg => {
				if (!msg.success)
					console.log('join error:', msg.message);
			});
			connection.onnegotiationneeded = async e => {
				await connection.setLocalDescription(await connection.createOffer());
				instance.emit('offer', {
					thread,
					sdp: connection.localDescription
				}, async msg => {
					if (!msg.success) {
						console.log('offer error:', msg.message);
						return;
					}
					await connection.setRemoteDescription(msg.sdp);
				});
			};
			connection.ontrack = track => {
				let audio = new Audio();
				audio.srcObject = new MediaStream([track.track]);
				audio.play();
				audio.onended = () => {
					audio.remove();
				};
			};
			connection.onicecandidate = event => {
				if (!instance || !event.candidate)
					return;
				let candidate = event.candidate.toJSON();
				if (!candidate.candidate)
					return;
				instance.emit('ice', {
					thread,
					candidate
				}, msg => {
					if (!msg.success)
						console.log('ice error:', msg.message);
				});
			};
			connection.onconnectionstatechange = e => {
				console.log(connection.connectionState);
				if (connection.connectionState === 'closed' && instance) {
					instance = null;
					if (thread === currentThread.id)
						this.innerText = 'join';
				}
			};
		}}>${instance && thread === currentThread.id ? 'leave' : 'join'}</button>
		<hr color='#505050'>
		<div id='stream'></div>`);
	if (Object.keys(currentThread.call).length)
		div.children['noone'].classList.add('hidden');
	for (let id in currentThread.call) {
		let p = document.createElement('p');
		p.append(window.makeUser(currentThread.call[id], id.split?.('@')[1] || currentInstance.url));
		div.children['users'].append(p);
	}
	if (!currentInstance.called) {
		currentInstance.socket.on('call', msg => {
			if (msg.thread !== currentThread.id)
				return;
			if (Object.keys(msg.call).length)
				div.children['noone'].classList.add('hidden');
			else
				div.children['noone'].classList.remove('hidden');
			currentThread.call = msg.call;
			div.children['users'].replaceChildren(...Object.values(msg.call).map(user => {
				let p = document.createElement('p');
				p.append(window.makeUser(user, user.id.split?.('@')[1] || currentInstance.url));
				return p;
			}));
		});
		currentInstance.socket.on('offer', async (msg, respond) => {
			if (!connection)
				return;
			await connection.setRemoteDescription(msg.sdp);
			await connection.setLocalDescription(await connection.createAnswer());
			respond({
				success: true,
				sdp: connection.localDescription
			});
		});
		currentInstance.socket.on('ice', msg => {
			if (!connection)
				return;
			connection.addIceCandidate(new RTCIceCandidate(msg.candidate));
		});
		currentInstance.called = true;
	}
	loadStreams();
}

export default loadCall;