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

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

// Login, the service origin and the launch form. Emits login {username}, set-service {service},
// launch {bidders, name, exp_s}. Renders the AgentsCubit state.
customElements.define('agents-launch', class extends Base {
	connectedCallback() {
		super.connectedCallback();
		const emit = (type, detail) => this.dispatchEvent(new CustomEvent(type, { bubbles: true, detail }));
		this.querySelector(".login-form").onsubmit = (e) => {
			e.preventDefault();
			emit("login", { username: e.target.username.value });
		};
		this.querySelector(".service-form").onsubmit = (e) => {
			e.preventDefault();
			emit("set-service", { service: e.target.service.value.trim() });
		};
		this.querySelector(".launch-form").onsubmit = (e) => {
			e.preventDefault();
			const f = e.target;
			emit("launch", { bidders: f.bidders.value.trim(), name: f.name.value.trim(), exp_s: f.exp_s.value });
		};
	}

	render(state, previous) {
		this.querySelector(".login").style.display = state.session === "signed-out" ? "block" : "none";
		this.querySelector(".panel").style.display = state.session === "signed-in" ? "block" : "none";
		this.querySelector(".login-button").toggleAttribute("aria-busy", state.login.busy);
		this.querySelector(".login .error").textContent = state.login.error ?? "";
		if (previous?.service !== state.service) this.querySelector(".service-form").service.value = state.service;
		const busy = Boolean(state.busy.launch);
		this.querySelector(".launch-button").toggleAttribute("aria-busy", busy);
		this.querySelector(".launch-button").disabled = busy;
		const last = state.results.launch;
		this.querySelector(".progress").textContent = busy ? "creating the launch record..." : last?.error ?? "";
	}
});