// This template could also be stored in HTML as a `<template>`
const TEMPLATE = `
<div class="message">
  <img class="profile-photo">
  <div class="author"></div>
  <div class="message-text">
    <slot name="message-text"></slot>
  </div>
  <time></time>
</div>
<style>
.message {
  float: left;
  position: relative;
  box-sizing: border-box;
  width: 300px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  background-color: #fafafa;
  padding: 10px 10px 10px calc(var(--profile-photo-size) + 20px);
  margin: 5px 0;
}

.message.self {
  float: right;
  background-color: #eff7ff;
}

.message time {
  font-size: 75%;
  opacity: 0.5;
}

.profile-photo {
  position: absolute;
  left: 10px;
  top: 10px;
  width: var(--profile-photo-size);
  height: var(--profile-photo-size);
}

.author {
  font-weight: 700;
}
</style>
`;

// The class extends `HTMLElement`, but actually it could extend any element, such as `HTMLImageElement`
class CustomMessage extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = TEMPLATE;
  }
  
  // Whenever an attibute is changed, this function is called. A switch statement is a good way to handle the various attributes.
  // Note that this also gets called the first time the attribute is set, so we do not need any special initialisation code.
  attributeChangedCallback(name, oldValue, newValue) {
    switch(name) {
      case 'author':
        this.shadowRoot.querySelector('.author').innerText = newValue;
        this.shadowRoot.querySelector('.message').classList.toggle('self', newValue === 'Me');
        break;
      case 'profile-photo':
        this.shadowRoot.querySelector('.profile-photo').setAttribute('src', newValue);
        break;
      case 'message-text':
        this.shadowRoot.querySelector('.message-text').innerText = newValue;
        break;
      case 'time':
        this.shadowRoot.querySelector('time').innerText = newValue;
        break;
    }
  }
  
  // We need to specify which attributes will be watched for changes. If an attribute is not included here, attributeChangedCallback will never be called for it
  static get observedAttributes() {
    return ['author', 'profile-photo', 'message-text', 'time'];
  }
}

// Now that our class is defined, we can register it
customElements.define('custom-message', CustomMessage);