import { createTextArea } from '@blukavantui/community/text-area'
import '@blukavantui/community/theme.css'
import '@blukavantui/community/text-area.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 append = document.createElement('button')
  append.type = 'button'; append.textContent = 'Append a draft line'
  const reset = document.createElement('button')
  reset.type = 'button'; reset.textContent = 'Reset draft'
  root.append(target, status, append, reset); host.append(root)
  let draft = 'Initial customer notes.'
  const render = () => { status.textContent = `Draft: ${draft.length} characters` }
  const instance = createTextArea(target, {
    Name: 'notes', Label: 'Customer notes', Value: draft,
    Rows: 3, AutoGrow: true, MaxHeight: 240, MaxLength: 280, ShowCount: true,
  }, { Change(value) { draft = value; render() } })
  const listeners = new AbortController()
  append.addEventListener('click', () => {
    // Programmatic values are not truncated by MaxLength.
    draft = (instance.getValue() + '\nFollow up with the customer.').slice(0, 280)
    instance.update({ Value: draft }); render()
  }, { signal: listeners.signal })
  reset.addEventListener('click', () => {
    instance.reset(); draft = instance.getValue(); render()
  }, { signal: listeners.signal })
  render()
  return { instance, destroy() { listeners.abort(); instance.destroy(); root.remove() } }
}