// retoor <retoor@molodetz.nl>
import { Component } from "./Component.js";

export class Avatar extends Component {
  static tag = "dp-avatar";
  static observedAttributes = ["seed", "uid", "size", "online"];

  setup() {
    this.render();
  }

  attributeChangedCallback() {
    if (this.dataset.ready) {
      this.render();
    }
  }

  render() {
    const uid = this.getAttribute("uid") || "";
    const size = Number(this.getAttribute("size") || 32);
    this.replaceChildren();
    const img = document.createElement("img");
    img.className = "avatar";
    img.alt = "";
    img.width = size;
    img.height = size;
    const seed = this.getAttribute("seed") || uid;
    img.src = `/avatar/svg/${encodeURIComponent(seed)}?size=${size}`;
    const dot = document.createElement("span");
    dot.className = "presence-dot";
    dot.dataset.presenceUid = uid;
    dot.classList.toggle("online", this.hasAttribute("online"));
    this.append(img, dot);
  }
}