<template>
  <v-icon :icon="icon" :color="color" size="20" />
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { isDataOverlayLength } from '@/functions/guards/isDataOverlayLength';
import { isDataOverlayAngle } from '@/functions/guards/isDataOverlayAngle';
import { isDataOverlayPolygon } from '@/functions/guards/isDataOverlayPolygon';
import { DataOverlayMeasurement } from '@3cr/viewer-types-ts';

interface Props {
  measurement: DataOverlayMeasurement;
}

const props = defineProps<Props>();

const color = computed(() => {
  if (isDataOverlayLength(props.measurement)) {
    return 'green';
  } else if (isDataOverlayPolygon(props.measurement)) {
    return 'red';
  } else if (isDataOverlayAngle(props.measurement)) {
    return 'blue';
  } else {
    return 'white';
  }
});

const icon = computed(() => {
  if (isDataOverlayLength(props.measurement)) {
    return 'filled:straighten';
  } else if (isDataOverlayPolygon(props.measurement)) {
    return 'filled:polyline';
  } else if (isDataOverlayAngle(props.measurement)) {
    return 'filled:square_foot';
  } else {
    return 'question_mark';
  }
});
</script>
