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

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

// Submitting fires a bubbling "create-key" event with { name, service, key }.
// What it shows comes only from render(state), the page cubit's state.
// Classes, not ids, inside: the page may hold more than one.
customElements.define('ssh-public-key-form', class extends Base {
	connectedCallback() {
		super.connectedCallback();
		this.querySelector("form").onsubmit = (e) => {
			e.preventDefault();
			const detail = Object.fromEntries(new FormData(e.target));
			this.dispatchEvent(new CustomEvent("create-key", { bubbles: true, detail }));
		};
	}

	render(state, previous) {
		this.querySelector(".panel").style.display = state.session === "signed-in" ? "inherit" : "none";
		this.querySelector(".welcome").innerText = state.handle ? `@${state.handle}` : "";
		const button = this.querySelector("button");
		if (state.create.status === "busy") button.setAttribute("aria-busy", "true");
		else button.removeAttribute("aria-busy");
		this.querySelector(".error").innerText = state.create.status === "error" ? state.create.error : "";
		// Clear the fields once, as a key is created, so another can be added.
		if (state.create.status === "done" && previous?.create.status !== "done") this.querySelector("form").reset();
	}
});