import { LitElement, html } from 'lit'
import { until } from 'lit/directives/until.js'
import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'

export class DisplayFeed extends LitElement {

  static get properties () {
    return {
      max: { type: Boolean },
      posts: { type: Array, state: true },
      feed: { type: String },
      title: { type: String }
    }
  }

  constructor () {
    super()
    this.title = 'Display Feed'
  }

  _post (post) {
    return html`<div class="df-item"><h3 class="df-title">${post.title}</h3><div class="df-content">${unsafeHTML(post.content)}</div></div>`
  }

  // connectedCallback () {
  //   super.connectedCallback()
  //   console.error
  //   this.posts = fetch(this.feed)
  //     .then(async res => { 
  //       const posts = await res.json()
  //       return posts.posts.map(this._post)
  //     })
  // }

  updated (changedProperties) {
    console.error('dentro changed ', changedProperties)
    console.error(this.feed)
    console.error(changedProperties)
    if (changedProperties.has('feed')) {
      console.error('feed cambiato')
      this.posts = fetch(this.feed)
        .then(async res => { 
          const posts = await res.json()
          return posts.posts.map(this._post)
        })      
    }
  }

  render() {
    // const loading = html`<span>Loading...</span>`
    // const title = html`<h2>${this.title}</h2>`
    return html`<h2>${this.title}</h2>${until(this.posts, 'Loading...')}`
  }

  // do not create a shadowDOM (we want style pollution from outside)
  createRenderRoot() { return this }
}


customElements.define('display-feed', DisplayFeed)