document.addEventListener('WebComponentsReady', function(event) {
  class HDAppUserInfo extends SIBDisplayLookupList {
    get parentElement() {
      return 'div';
    }
    getTemplate(value, index) {
      var firstname, lastname, email;

      if (typeof value == 'object')
        if (Object.keys(value).length > 1) {
          firstname = value.first_name;
          lastname = value.last_name;
          email = value.email;
        } else {
          store.get(value).then(resource => {
            this.value.push(resource);
            this.render();
          });
          if (Array.isArray(this.value))
            this.value.splice(this.value.indexOf(value), 1);
          else this.value = [];
          return '';
        }
      return `<div>${firstname} ${lastname}</div>`;
      // + `<div id="${email}">${email}</div>`;
    }
  }
  customElements.define('hdapp-userinfo', HDAppUserInfo);

  class HDAppCell extends SIBDisplayLookupList {
    get parentElement() {
      return 'div';
    }
    getTemplate(value, index) {
      var city, country;

      if (typeof value == 'object')
        if (Object.keys(value).length > 1) {
          city = value.city;
          country = value.country;
        } else {
          store.get(value).then(resource => {
            this.value.push(resource);
            this.render();
          });
          if (Array.isArray(this.value))
            this.value.splice(this.value.indexOf(value), 1);
          else this.value = [];
          return '';
        }
      return `<span>${city} - ${country}</span>`;
    }
  }
  customElements.define('hdapp-usercell', HDAppCell);

  class HDAppMail extends SIBWidget {
    get template() {
      return `<a href="mailto:${this.value}"><div class="icon-envelope"></div><div>SEND A MESSAGE</div></a>`;
    }
  }
  customElements.define('hdapp-mail', HDAppMail);

  class HDAppMember extends SIBWidget {
    get template() {
      return `
        <div name="${this.name}">
          <img src="${this.value.avatar}"/>
        </div>
      `;
    }

    render() {
      store.get(this.value).then(value => {
        this._value = value;
        this.innerHTML = this.template;
      });
    }
  }
  customElements.define('hdapp-member', HDAppMember);

  class HDAppAuthor extends SIBDisplayLookupList {
    get parentElement() {
      return 'div';
    }
    getTemplate(value, index) {
      return JSON.stringify(value);
      var firstname, lastname;
      if (typeof value == 'object')
        if (Object.keys(value).length > 1) {
          firstname = value.user.first_name;
          lastname = value.user.last_name;
        } else {
          store.get(value).then(resource => {
            this.value.push(resource);
            this.render();
          });
          if (Array.isArray(this.value))
            this.value.splice(this.value.indexOf(value), 1);
          else this.value = [];
          return '';
        }
      return `${firstname} ${lastname}`;
    }
  }
  customElements.define('hdapp-author', HDAppAuthor);

  class HDAppClosingDate extends SIBWidget {
    get template() {
      return this.value
        ? `<strong>closed</strong> (${this.value})`
        : '<strong>open</strong>';
    }

    render() {
      this.innerHTML = this.template;
    }
  }

  customElements.define('hdapp-closing-date', HDAppClosingDate);

  class HDAppAvailable extends SIBWidget {
    get template() {
      return this.value
        ? '<strong>Available</strong>'
        : '<strong>Not available</strong>';
    }

    render() {
      this.innerHTML = this.template;
    }
  }

  customElements.define('hdapp-available', HDAppAvailable);

  class HDAppHyperlink extends SIBWidget {
    get template() {
      const escaped = this.value
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
      return `<a href="${escaped}">${escaped}</a>`;
    }

    render() {
      this.innerHTML = this.template;
    }
  }

  customElements.define('hdapp-hyperlink', HDAppHyperlink);
});