import { templated } from 'atlibs/component/index.js'

const Base = await templated(new URL('./atirc-messages.html', import.meta.url));

function line({ ts, nick, identity, text }) {
	const li = Base.templates.line.content.cloneNode(true);
	li.querySelector(".ts").textContent = new Date(ts).toLocaleTimeString();
	li.querySelector(".nick").textContent = nick;
	li.querySelector(".nick").title = identity ?? "";
	li.querySelector(".text").textContent = text;
	return li;
}

// All text goes in through textContent, so channel lines cannot inject markup.
// What it shows comes only from render(state), the page cubit's state.
customElements.define('atirc-messages', class extends Base {
	render(state, previous) {
		this.querySelector(".panel").style.display = state.session === "signed-in" ? "inherit" : "none";
		if (previous && previous.messages === state.messages) return;
		const { status, list, error } = state.messages;
		const lines = this.querySelector(".lines");
		if (status === "loading" || status === "idle") lines.setAttribute("aria-busy", "true");
		else lines.removeAttribute("aria-busy");
		this.querySelector(".error").textContent = status === "error" ? `Error reading channel: ${error}` : "";
		if (previous?.messages.list !== list) lines.replaceChildren(...list.map(line));
	}
});