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

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

// A line terminal over the datachannel: emits send-line {line}; output goes in as textContent.
customElements.define('webrtc-terminal', class extends Base {
	connectedCallback() {
		super.connectedCallback();
		this.querySelector(".line").onsubmit = (e) => {
			e.preventDefault();
			this.dispatchEvent(new CustomEvent("send-line", { bubbles: true, detail: { line: e.target.line.value } }));
			e.target.line.value = "";
		};
	}

	render(state, previous) {
		this.querySelector(".panel").style.display = ["open", "closed"].includes(state.phase) ? "block" : "none";
		if (previous?.output === state.output) return;
		const output = this.querySelector(".output");
		output.textContent = state.output;
		output.scrollTop = output.scrollHeight;
	}
});