export class Dialog extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({mode: 'open'})
    this.windowEl = document.createElement('div')
    this.windowEl.classList.add('window')
    this.headerEl = document.createElement('div')
    this.headerEl.classList.add('header')
    this.bodyEl = document.createElement('div')
    this.bodyEl.classList.add('body')
    this.footerEl = document.createElement('div')
    this.footerEl.classList.add('footer')
    this.windowEl.replaceChildren(
      this.headerEl, this.bodyEl, this.footerEl
    )
    this.shadowRoot.appendChild(this.windowEl)
  }

  connectedCallback() {
    this.textArea.value = this.body
    const style = document.createElement('style')
    style.textContent = `
      :host {
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
      }
    `
    this.shadowRoot.append(style)
  }
}