<template>
  <div v-html="generateIcon()" class="w-fit"></div>
</template>
<script lang="ts">
import { createAvatar, StyleOptions } from "@dicebear/core";
import { avataaars } from "@dicebear/collection";
import { Vue, Component, Prop } from "vue-facing-decorator";
import { Contact } from "../db/tables/contacts";

@Component
export default class EntityIcon extends Vue {
  @Prop contact: Contact;
  @Prop entityId = ""; // overridden by contact.did or profileImageUrl
  @Prop iconSize = 0;
  @Prop profileImageUrl = ""; // overridden by contact.profileImageUrl

  generateIcon() {
    const imageUrl = this.contact?.profileImageUrl || this.profileImageUrl;
    if (imageUrl) {
      return `<img src="${imageUrl}" class="rounded" width="${this.iconSize}" height="${this.iconSize}" />`;
    } else {
      const identifier = this.contact?.did || this.entityId;
      if (!identifier) {
        return `<img src="../src/assets/blank-square.svg" class="rounded" width="${this.iconSize}" height="${this.iconSize}" />`;
      }
      // https://api.dicebear.com/8.x/avataaars/svg?seed=
      // ... does not render things with the same seed as this library.
      // "did:ethr:0x222BB77E6Ff3774d34c751f3c1260866357B677b" yields a girl with flowers in her hair and a lightning earring
      // ... which looks similar to '' at the dicebear site but which is different.
      const options: StyleOptions<object> = {
        seed: (identifier as string) || "",
        size: this.iconSize,
      };
      const avatar = createAvatar(avataaars, options);
      const svgString = avatar.toString();
      return svgString;
    }
  }
}
</script>
<style scoped></style>