export class Layout extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({mode: 'open'})
    this.header = document.createElement('m-header')
    this.shadowRoot.appendChild(this.header)
    this.load()
    addEventListener('hashchange', () => {
      this.load()
    })
  }

  connectedCallback() {
    const style = document.createElement('style')
    style.textContent = `
      :host {
        width: 100%;
        height: 100dvh;
        display: flex;
        flex-direction: column;
      }
      .m-page {
        flex-grow: 1;
      }
    `
    document.appendChild(style)
  }

  load() {
    const path = this.path
    const prevPage = this.page
    this.page = document.createElement('m-page')
    this.page.path = path
    if (prevPage !== undefined) {
      prevPage.remove()
    }
    this.shadowRoot.appendChild(this.page)
    this.header.path = path
  }

  get path() {
    return new URL(
      window.location.hash.slice(1) || '/',
      window.location
    ).pathname
  }
}