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

const Base = await templated(new URL('./knotless-repo.html', import.meta.url))

customElements.define('knotless-repo', class extends Base {
	connectedCallback() {
		super.connectedCallback()
		const send = (name, detail) => this.dispatchEvent(new CustomEvent(name, { bubbles: true, detail }))
		const fields = (form) => Object.fromEntries(new FormData(form))
		this.querySelector('.login').onsubmit = (e) => (e.preventDefault(), send('login', e.target.handle.value))
		this.querySelector('.create').onsubmit = (e) => (e.preventDefault(), send('create-repo', fields(e.target)))
		this.querySelector('.commit').onsubmit = (e) => (e.preventDefault(), send('commit', fields(e.target)))
		this.querySelector('.logout').onclick = () => send('logout')
	}

	render({ session, did, error, run }) {
		this.querySelector('.login').hidden = session !== 'signed-out'
		this.querySelector('.signed-in').hidden = session !== 'signed-in'
		this.querySelector('.who').textContent = did ? `Signed in as ${did}` : ''
		for (const button of this.querySelectorAll('.signed-in form button')) button.ariaBusy = button.disabled = run.status === 'busy'
		const out = run.result && JSON.stringify(run.result, null, 2)
		this.querySelector('.out').textContent = error ?? run.error ?? out ?? ''
	}
})