import { pivotize } from '../src/textProcessing/pivotize.js'

class RSVPWord extends HTMLElement {
  constructor() {
    super()
    const shadow = this.attachShadow({ mode: 'open' })
    const style = document.createElement('style')
    const word = document.createElement('div')
    const prefix = document.createElement('span')
    const pivot = document.createElement('span')
    const suffix = document.createElement('span')

    word.setAttribute('class', 'word')
    prefix.setAttribute('class', 'prefix')
    pivot.setAttribute('class', 'pivot')
    suffix.setAttribute('class', 'suffix')

    style.textContent =
      '.word{display:flex}.pivot{color:red}.prefix,.suffix{flex:1}.prefix{text-align:right}'

    word.appendChild(prefix)
    word.appendChild(pivot)
    word.appendChild(suffix)
    shadow.appendChild(style)
    shadow.appendChild(word)

    this._root = shadow
    this.wordParts = { prefix, pivot, suffix }
  }

  connectedCallback() {
    this.updateDisplay()
  }

  static get observedAttributes() {
    return ['word']
  }

  attributeChangedCallback() {
    this.updateDisplay()
  }

  updateDisplay() {
    const [prefix, pivot, suffix] = pivotize(this.getAttribute('word') || '')
    this.wordParts.prefix.innerText = prefix
    this.wordParts.pivot.innerText = pivot
    this.wordParts.suffix.innerText = suffix
  }
}

window.customElements.define('rsvp-word', RSVPWord)