import { createRadioButton } from '@blukavantui/community/radio-button'
import '@blukavantui/community/theme.css'
import '@blukavantui/community/radio-button.css'

export function mount(host: HTMLElement) {
  const root = document.createElement('fieldset')
  const legend = document.createElement('legend'); legend.textContent = 'Delivery method'
  const standardHost = document.createElement('div'), expressHost = document.createElement('div')
  const status = document.createElement('p'); status.setAttribute('role', 'status')
  const reset = document.createElement('button')
  reset.type = 'button'; reset.textContent = 'Use standard delivery'
  root.append(legend, standardHost, expressHost, status, reset); host.append(root)
  const name = `delivery-${crypto.randomUUID()}` // Shared by this pair, unique across mounted examples.
  let selected = 'standard'
  function select(value: string) {
    selected = value
    standard.update({ Checked: selected === 'standard' })
    express.update({ Checked: selected === 'express' })
    status.textContent = `Selected: ${selected}`
  }
  const standard = createRadioButton(standardHost, {
    Name: name, Value: 'standard', Label: 'Standard', Checked: true,
  }, { Change(checked) { if (checked) select('standard') } })
  const express = createRadioButton(expressHost, {
    Name: name, Value: 'express', Label: 'Express', Checked: false,
  }, { Change(checked) { if (checked) select('express') } })
  // The browser does not notify the sibling that it unchecked.
  const listeners = new AbortController()
  reset.addEventListener('click', () => select('standard'), { signal: listeners.signal })
  select(selected)
  return { standard, express, destroy() {
    listeners.abort(); standard.destroy(); express.destroy(); root.remove()
  } }
}