export class Project extends HTMLElement {
  constructor() {
    super()
    const shadow = this.attachShadow({mode: 'open'})
    const textArea = document.createElement('textarea')
    const path = new URL(
      window.location.hash || '/',
      window.location
    ).pathname
    const header = document.createElement('h1')
    header.innerText = path
    textArea.value = localStorage.getItem(
      window.location.hash
    ) ?? ''
    textArea.addEventListener('input', e => {
      localStorage.setItem(
        window.location.hash,
        e.target.value
      )
    })
    const div = document.createElement('div')
    div.appendChild(header)
    div.appendChild(textArea)
    shadow.appendChild(div)
  }

  connectedCallback() {
    const style = document.createElement('style')
    style.textContent = `
      textarea {
        width: 80%;
        height: 90dvh;
      }
    `
    this.shadowRoot.append(style)
  }
}