import { createCheckbox } from '@blukavantui/community/checkbox'
import '@blukavantui/community/theme.css'
import '@blukavantui/community/checkbox.css'

export function mount(host: HTMLElement) {
  const root = document.createElement('section')
  const target = document.createElement('div')
  const status = document.createElement('p')
  status.setAttribute('role', 'status')
  const reset = document.createElement('button')
  reset.type = 'button'; reset.textContent = 'Reset selection'
  const check = document.createElement('button')
  check.type = 'button'; check.textContent = 'Check acceptance'
  root.append(target, status, check, reset); host.append(root)
  let accepted = false
  const render = () => { status.textContent = `Accepted: ${accepted}` }
  const instance = createCheckbox(target, {
    Name: 'accepted', Label: 'I accept the terms', Required: true,
    Checked: accepted, Description: 'Required before continuing.',
  }, { Change(value) { accepted = value; instance.update({ Error: '' }); render() } })
  const listeners = new AbortController()
  reset.addEventListener('click', () => {
    instance.update({ Error: '' }); instance.reset()
    accepted = instance.getValue(); render() // reset does not emit Change
  }, { signal: listeners.signal })
  check.addEventListener('click', () => {
    instance.update({ Error: '' })
    const valid = instance.validate()
    instance.update({ Error: valid ? '' : 'Accept the terms before continuing.' })
    status.textContent = valid ? 'Ready to continue.' : 'Acceptance is required.'
  }, { signal: listeners.signal })
  render()
  return { instance, destroy() { listeners.abort(); instance.destroy(); root.remove() } }
}