<template>
  <Action
    :text="t('labels.length')"
    icon="straighten"
    :color="enabled ? 'blue-lighten-1' : 'white'"
    :variant="variant"
    @click="toggle"
    data-testid="button"
  />
</template>

<script setup lang="ts">
import { useToolStore } from '@/stores/tool.store';
import { useToolGroup } from '@/composables/useToolGroup';
import { ScanView } from '@3cr/types-ts';
import { useI18n } from 'vue-i18n';
import { computed } from 'vue';

interface Props {
  view: ScanView;
  variant?: 'button' | 'menu-item';
}

withDefaults(defineProps<Props>(), {
  variant: 'button',
});

const { t } = useI18n();
const { measurementAngleTool, measurementLengthTool, measurementPolygonTool } =
  useToolStore();
const { activeTool, toggleTool } = useToolGroup(
  measurementLengthTool,
  measurementPolygonTool,
  measurementAngleTool,
);

function toggle(): void {
  setTimeout(() => {
    // TODO: fix input issue with unity
    toggleTool(measurementLengthTool);
  }, 100);
}

const enabled = computed(() => {
  return activeTool.value === measurementLengthTool;
});
</script>
