<!-- eslint-disable vue/no-v-html -->
<template>
  <a
    v-if="linkToFullImage && imageUrl"
    :href="imageUrl"
    target="_blank"
    class="h-full w-full object-contain"
  >
    <div class="h-full w-full object-contain" v-html="generateIcon()" />
  </a>
  <div v-else class="h-full w-full object-contain" v-html="generateIcon()" />
</template>
<script lang="ts">
import { toSvg } from "jdenticon";
import { Vue, Component, Prop } from "vue-facing-decorator";

const BLANK_CONFIG = {
  lightness: {
    color: [1.0, 1.0],
    grayscale: [1.0, 1.0],
  },
  saturation: {
    color: 0.0,
    grayscale: 0.0,
  },
  backColor: "#0000",
};

@Component
export default class ProjectIcon extends Vue {
  @Prop entityId = "";
  @Prop iconSize = 0;
  @Prop imageUrl = "";
  @Prop linkToFullImage = false;

  generateIcon() {
    if (this.imageUrl) {
      return `<img src="${this.imageUrl}" class="w-full h-full object-contain" />`;
    } else {
      const config = this.entityId ? undefined : BLANK_CONFIG;
      const svgString = toSvg(this.entityId, this.iconSize, config);
      return svgString;
    }
  }
}
</script>
<style scoped></style>
