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

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

// Markup in .html, behaviour here: send events up, render the state it is given.
customElements.define('hello-count', class extends Base {
	connectedCallback() {
		super.connectedCallback()
		this.querySelector('form').onsubmit = (e) => {
			e.preventDefault()
			this.dispatchEvent(new CustomEvent('count', { bubbles: true, detail: Object.fromEntries(new FormData(e.target)) }))
		}
	}

	render({ count: { status, result, error } }) {
		this.querySelector('button').disabled = status === 'busy'
		this.querySelector('.out').textContent = error ?? (result ? `${result.records} records in ${result.collection}` : '')
	}
})