import { createSelect, type Choice } from '@blukavantui/community/select'
import '@blukavantui/community/theme.css'
import '@blukavantui/community/select.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 replace = document.createElement('button')
  replace.type = 'button'; replace.textContent = 'Remove email option'
  const reset = document.createElement('button')
  reset.type = 'button'; reset.textContent = 'Restore choices'
  const check = document.createElement('button')
  check.type = 'button'; check.textContent = 'Check selection'
  root.append(target, status, replace, reset, check); host.append(root)
  const choices: Choice[] = [
    { Value: 'email', Label: 'Email', Description: 'Send a written update.' },
    { Value: 'phone', Label: 'Phone', Description: 'Speak to our team.' },
    { Value: 'post', Label: 'Post', Disabled: true, Description: 'Currently unavailable.' },
  ]
  let selected = 'email'
  const render = () => { status.textContent = `Selected: ${selected || '(none)'}` }
  const instance = createSelect(target, {
    Name: 'contactMethod', Label: 'Contact method', Required: true,
    Options: choices, Value: selected, Searchable: true, Clearable: true, Placeholder: 'Choose a contact method',
  }, { Change(value) { selected = value; instance.update({ Error: '' }); render() } })
  const listeners = new AbortController()
  replace.addEventListener('click', () => {
    instance.update({ Options: choices.filter(option => option.Value !== 'email') })
    selected = instance.getValue(); render() // Updates do not emit Change.
  }, { signal: listeners.signal })
  reset.addEventListener('click', () => {
    instance.update({ Options: choices, Error: '' }); instance.reset()
    selected = instance.getValue(); render()
  }, { signal: listeners.signal })
  check.addEventListener('click', () => {
    instance.update({ Error: '' })
    selected = instance.getValue()
    // Also reject an empty selection when no enabled choices remain.
    const valid = !!selected && instance.validate()
    instance.update({ Error: valid ? '' : 'Choose an available contact method.' })
    status.textContent = valid ? `Ready: ${selected}` : 'A contact method is required.'
  }, { signal: listeners.signal })
  render()
  return { instance, destroy() { listeners.abort(); instance.destroy(); root.remove() } }
}