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

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

customElements.define('hello-status', class extends Base {
	connectedCallback() {
		super.connectedCallback()
		const send = (name, detail) => this.dispatchEvent(new CustomEvent(name, { bubbles: true, detail }))
		this.querySelector('.login').onsubmit = (e) => {
			e.preventDefault()
			send('login', e.target.handle.value)
		}
		this.querySelector('.status').onsubmit = (e) => {
			e.preventDefault()
			send('status', e.target.status.value)
		}
		this.querySelector('.logout').onclick = () => send('logout')
	}

	render({ session, did, error, status }) {
		this.querySelector('.login').hidden = session !== 'signed-out'
		this.querySelector('.status').hidden = session !== 'signed-in'
		this.querySelector('.status button').disabled = status.status === 'busy'
		const out = status.result && (status.result.unchanged ? `already ${status.result.status}` : `set ${status.result.status}: ${status.result.uri}`)
		this.querySelector('.out').textContent = error ?? status.error ?? out ?? (did ? `signed in as ${did}` : '')
	}
})