/**
 * Prints VRE d4s-social-posts (limiting to @quantity number)
 */
window.customElements.define('d4s-social-posts', class extends HTMLElement {

  #basepath = 'https://api.d4science.org/rest'
  //#basepath = 'https://api.dev.d4science.org/rest'
  #quantity = 20
  #boot = null;
  #data = null;
  #shadowRoot = null;
    
  constructor() {
    super()
    this.#boot = document.querySelector("d4s-boot-2")
    this.#shadowRoot = this.attachShadow({mode: 'open'})
  }

  connectedCallback() {
    this.fetchPosts()
  }

  fetchPosts() {
    const url = this.#basepath + '/2/posts/get-posts-vre'
    this.#boot.secureFetch(url).then(reply => {
      if(reply.status !== 200) throw "Unable to fetch posts";
      return reply.json()

    }).then(data => {
      this.#data = data
      this.renderPosts()

    }).catch(err => console.error("Unable to fetch posts " + err))
  }
    
  renderPosts() {
    var ul = document.createElement('ul')
    this.#data.result.reverse().forEach(post => {
      if (this.#quantity-- > 0) {
        var li = document.createElement('li')
        li.setAttribute('class', 'd4s-social-post')
        const datetime = new Date(0)
        datetime.setUTCMilliseconds(post.time)
        const thumbnail = (!post.thumbnail_url.startsWith('http')) ? 'https://' + this.#boot.clientId + post.thumbnail_url : post.thumbnail_url
        li.innerHTML = `
          <div class="d4s-post-heading">
            <div class="d4s-post-avatar">
              <img src="${thumbnail}" onerror="this.style.display='none'" width="32px" height="32px"></slot>
            </div>
            <div class="d4s-post-meta">
              <div class="fullname">${post.full_name}</div>
              <div class="time">${datetime.toLocaleString()}</div>
            </div>
          </div>
          <div class="d4s-post-body">${post.description}</div>
          <div class="d4s-post-footer"></div>
        `
        ul.appendChild(li)
      }
    })
    this.#shadowRoot.appendChild(ul)
  }

  static get observedAttributes() {
    return ["url", "quantity"];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue !== newValue) {
      switch (name) {
        case "url":
          this.#basepath = newValue
          break
        case "quantity":
          this.#quantity = newValue
          break
      }
    }
  }
  
  get url() {
    return this.#basepath
  }

  set url(url) {
    this.#basepath = url
    this.setAttribute("url", url)
  }

  get quantity() {
    return this.#quantity
  }

  set quantity(quantity) {
    this.#quantity = quantity
    this.setAttribute("quantity", quantity)       
  }
})