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: Object, state: true },
      url: { type: String },
      title: { type: String }
    }
  }

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

  _post (post) {
    return html`<div class="df-item"><img src="${post.image}" /><a href="${post.url}"><h3 class="df-title">${post.title}</h3></a><div class="df-content">${unsafeHTML(post.content_html || post.content_text)}</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) {
    if (changedProperties.has('url')) {
      this.feed = fetch(this.url)
        .then(async res => {
          const feed = await res.json()
          const head = html`<a href="${feed.home_page_url}"><h3>${feed.title}</h3></a><small>${feed.description}</small>`
          const posts = feed.items.map(this._post)
          return html`${head}${posts}`
        })
    }
  }

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

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


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