<template>
  <div :style="mask">
    <div :style="background"></div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { fromColourData } from '@/functions/colours';
import { DataOverlayAnnotation } from '@3cr/viewer-types-ts';

interface Props {
  annotation: DataOverlayAnnotation;
  size?: string | number;
}

const props = withDefaults(defineProps<Props>(), {
  size: 12
});

const background = computed(() => {
  const px = `${props.size}px`;
  return {
    'background-color': color.value,
    width: px,
    height: px
  };
});

const color = computed(() => {
  return fromColourData(props.annotation.Colour2d);
});

const mask = computed(() => {
  const src = `data:image/png;base64, ${props.annotation.Icon2d}`;
  const px = `${props.size}px`;
  return {
    display: 'inline-block',
    'mask-size': `${px} ${px}`,
    'mask-image': `url('${src}')`,
    width: px,
    height: px
  };
});
</script>
