import { createTextInput } from '@blukavantui/community/text-input'
import '@blukavantui/community/theme.css'
import '@blukavantui/community/text-input.css'

// Pass a public application image URL for the left-side image example.
export function mount(host: HTMLElement, imageUrl?: string) {
  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 email'
  root.append(target, status, reset); host.append(root)
  let email = ''
  const instance = createTextInput(target, {
    Name: 'email', Label: 'Contact email', Type: 'email', Required: true,
    Value: email, Autocomplete: 'email', Clearable: true,
    Leading: imageUrl ? { Kind: 'Image', Src: imageUrl, Alt: 'Contact' }
      : { Kind: 'Icon', Text: '@', Label: 'Email' },
    Trailing: { Kind: 'Action', Text: 'Check', Label: 'Check this email', Key: 'check' },
  }, {
    Change(value) { email = value; instance.update({ Error: '' }); status.textContent = `Draft: ${email || '(empty)'}` },
    Action(key, value) {
      if (key !== 'check') return
      instance.update({ Error: '' })
      const valid = instance.validate()
      instance.update({ Error: valid ? '' : 'Enter a valid contact email.' })
      status.textContent = valid ? `Ready to use: ${value}` : 'Please correct the email.'
      // A format check is not verification that an address exists.
    },
    Blur() { email = instance.getValue() },
  })
  const listeners = new AbortController()
  reset.addEventListener('click', () => {
    instance.update({ Error: '' }); instance.reset()
    email = instance.getValue(); status.textContent = 'Email reset.'
  }, { signal: listeners.signal })
  return { instance, destroy() { listeners.abort(); instance.destroy(); root.remove() } }
}