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

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

// Fires bubbling "set-channel" with { channel } and "post-line" with { text }.
// What it shows comes only from render(state), the page cubit's state.
customElements.define('atirc-post-form', class extends Base {
	connectedCallback() {
		super.connectedCallback();
		const on = (selector, type) => (this.querySelector(selector).onsubmit = (e) => {
			e.preventDefault();
			this.dispatchEvent(new CustomEvent(type, { bubbles: true, detail: Object.fromEntries(new FormData(e.target)) }));
		});
		on(".channel-form", "set-channel");
		on(".post-form", "post-line");
	}

	render(state, previous) {
		this.querySelector(".panel").style.display = state.session === "signed-in" ? "inherit" : "none";
		this.querySelector(".welcome").textContent = state.handle ? `@${state.handle}` : "";
		if (previous?.channel !== state.channel) this.querySelector("[name=channel]").value = state.channel;
		const button = this.querySelector(".post-form button");
		if (state.post.status === "busy") button.setAttribute("aria-busy", "true");
		else button.removeAttribute("aria-busy");
		this.querySelector(".error").textContent = state.post.status === "error" ? state.post.error : "";
		if (state.post.status === "done" && previous?.post.status !== "done") this.querySelector(".post-form").reset();
	}
});