"use strict";

const display_id_length = 7;

function handle_toggle_id(event) {
	event.target.closest(`.peer-name`)
		.querySelector(`.peer-name-id`)
		.classList.toggle(`invisible-gone`);
}

async function handle_copy_id(event) {
	let peer_id = event.target
		.closest(`.peer-name`)
		.dataset.peer_id;
	await navigator.clipboard.writeText(peer_id);
	
	event.target.replaceChildren(document.createTextNode(`Copied!`));
	
	setTimeout(() => {
		event.target.replaceChildren(document.createTextNode(
			peer_id.substring(0, display_id_length)
		));
	}, 1250);
	
	// TODO: Show a fancy notification here?
}

export default function peer_name(peer) {
	const result = document.createElement("span");
	result.classList.add(`peer-name`);
	result.dataset.peer_id = peer.id;
	result.dataset.peer_name = peer.name;
	
	const peer_name = document.createElement("span");
	peer_name.classList.add(`peer-name-name`);
	peer_name.appendChild(document.createTextNode(peer.name));
	
	const peer_id = document.createElement("span");
	peer_id.classList.add(`peer-name-id`, `invisible-gone`);
	peer_id.appendChild(document.createTextNode(
		peer.id.substring(0, display_id_length)
	));
	
	peer_name.addEventListener("click", handle_toggle_id);
	peer_id.addEventListener("click", handle_copy_id);
	// TODO: When the id is clicked, copy it to the clipboard - we may need a fancy tooltip library for this
	
	// text-overflow: ellipsis; may be useful here
	
	result.replaceChildren(peer_name, peer_id);
	
	
	return result;
}