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

export function mount(host: HTMLElement) {
  const root = document.createElement('section')
  const toggle = document.createElement('button')
  toggle.type = 'button'; toggle.textContent = 'Use natural heights'
  const spacing = document.createElement('button')
  spacing.type = 'button'; spacing.textContent = 'Change layout spacing'
  const target = document.createElement('div')
  root.append(toggle, spacing, target); host.append(root)
  let equal = true, compact = false
  const instance = createColumns4(target, {
    Ratio: 'Equal', EqualHeight: equal, Gap: 24, StackAt: 'Medium',
  })
  const cards = instance.columns.map((column, index) => {
    const card = document.createElement('article')
    card.style.cssText = 'padding:20px;border:1px solid #94a3b8;border-radius:12px;box-sizing:border-box'
    const title = document.createElement('h4'); title.textContent = `Panel ${index + 1}`
    const text = document.createElement('p')
    text.textContent = index === 0 ? 'A short summary.' :
      'A longer panel with instructions, supporting context and follow-up details. It shares the row height when equal height is enabled.'
    card.append(title, text); column.append(card); return card
  })
  const input = createTextInput(cards[0], { Label: 'Notes retained during layout changes', Value: 'Keep this draft' })
  const listeners = new AbortController()
  toggle.addEventListener('click', () => {
    equal = !equal; instance.update({ EqualHeight: equal })
    toggle.textContent = equal ? 'Use natural heights' : 'Use equal heights'
  }, { signal: listeners.signal })
  spacing.addEventListener('click', () => {
    compact = !compact
    instance.update({ Gap: compact ? 8 : 24, Ratio: 'Equal' })
  }, { signal: listeners.signal })
  return { instance, input, destroy() {
    listeners.abort(); input.destroy(); instance.destroy(); root.remove()
  } }
}