import { createSwitch } from '@blukavantui/community/switch'
import '@blukavantui/community/theme.css'
import '@blukavantui/community/switch.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 = 'Restore saved preference'
  root.append(target, status, reset); host.append(root)
  const savedPreference = true // Replace with your application data.
  let enabled = savedPreference
  const render = () => { status.textContent = `Draft preference: ${enabled ? 'enabled' : 'disabled'}` }
  const instance = createSwitch(target, {
    Name: 'notifications', Label: 'Email notifications', Checked: enabled,
    OnText: 'On', OffText: 'Off', Description: 'Changes here are not sent to a server.',
  }, { Change(value) { enabled = value; render() } })
  const listeners = new AbortController()
  reset.addEventListener('click', () => {
    instance.update({ Checked: savedPreference })
    enabled = instance.getValue(); render()
  }, { signal: listeners.signal })
  render()
  return { instance, destroy() { listeners.abort(); instance.destroy(); root.remove() } }
}