<template>
  <div class="hash-badge">
    <canvas ref="canvas" :width="width" height="3" :title="address" />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";

const BADGE_HEIGHT = 3;

export default defineComponent({
  name: "HashBadge",
  props: {
    address: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const canvas = ref<HTMLCanvasElement | undefined>(undefined);
    const width = ref(0);

    const bytes = [...props.address].map((c) => c.charCodeAt(0));
    while (bytes.length % (3 * BADGE_HEIGHT) !== 0) {
      bytes.push(bytes[bytes.length - 1]);
    }

    width.value = Math.ceil(bytes.length / 3 / BADGE_HEIGHT);

    onMounted(() => {
      const ctx = canvas.value?.getContext("2d");
      if (!ctx) {
        console.warn("Couldn't initialize canvas!");
        return;
      }

      let idx = 0;
      while (bytes.length > 0) {
        const tmp = [];
        while (bytes.length > 0 && tmp.length < 3) {
          tmp.push(bytes.shift());
        }
        while (tmp.length < 3) {
          tmp.push(tmp[tmp.length - 1]);
        }

        const r = (tmp[0]! / 128) * 255;
        const g = (tmp[1]! / 128) * 255;
        const b = (tmp[2]! / 128) * 255;
        ctx.fillStyle = `rgb(${r},${g},${b})`;
        ctx.fillRect(Math.floor(idx / BADGE_HEIGHT), idx % BADGE_HEIGHT, 1, 1);
        idx++;
      }
    });

    return {
      canvas,
      width,
    };
  },
});
</script>

<style scoped>
.hash-badge {
  display: inline-block;
  height: 1em;
}

.hash-badge canvas {
  height: 100%;
  image-rendering: optimizeSpeed;
}
</style>
