<template>
  <v-card v-bind="$attrs" color="background" flat tile>
    <DrawerTitle :title="t('labels.measurementTools')" />
    <v-card-text class="px-2 pb-4">
      <v-tabs :model-value="activeIndex" fixed-tabs :mandatory="false">
        <template v-for="tab in tabs">
          <v-tooltip location="bottom" open-delay="1000">
            <template #activator="{ props }">
              <v-tab v-bind="props" @click="tab.click">
                <v-icon :icon="tab.icon" />
              </v-tab>
            </template>
            <span>{{ tab.tooltip }} {{ translateTooltipShortcut(tab.tooltipShortcut) }}</span>
          </v-tooltip>
        </template>
      </v-tabs>
    </v-card-text>
  </v-card>
  <MeasurementLengthSnackbar class="mb-3" v-model="s_length" />
  <MeasurementPolygonSnackbar class="mb-3" v-model="s_polygon" />
  <MeasurementAngleSnackbar class="mb-3" v-model="s_angle" />
  <MeasurementDeleteSnackbar
    class="mb-3"
    v-if="measurementToDelete"
    v-model="s_measurementDelete"
    :measurement="measurementToDelete"
  />
</template>

<script setup lang="ts">
import { computed, onBeforeUnmount, ref } from 'vue';
import { useToolStore } from '@/stores/tool.store';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { SHORTCUT_TEXT, translateTooltipShortcut } from '@/functions/translateTooltipShortcut';
import { useViewerStore } from '@/stores/viewer.store';
import { useToolGroup } from '@/composables/useToolGroup';

const { t } = useI18n();
const { measurementAngleTool, measurementLengthTool, measurementPolygonTool } = useToolStore();
const { activeTool, activeIndex, toggleTool } = useToolGroup(
  measurementLengthTool,
  measurementPolygonTool,
  measurementAngleTool
);
const { measurementToDelete, s_measurementDelete } = storeToRefs(useViewerStore());

const s_length = ref<boolean>(false);
const s_polygon = ref<boolean>(false);
const s_angle = ref<boolean>(false);

const tabs = computed(() => [
  {
    icon: 'straighten',
    click: length,
    tooltip: t('labels.length'),
    tooltipShortcut: SHORTCUT_TEXT.l
  },
  {
    icon: 'polyline',
    click: polygon,
    tooltip: t('labels.polygon'),
    tooltipShortcut: SHORTCUT_TEXT.p
  },
  {
    icon: 'square_foot',
    click: angle,
    tooltip: t('labels.angle'),
    tooltipShortcut: SHORTCUT_TEXT.a
  }
]);

onBeforeUnmount(() => {
  activeTool.value = null;
});

function angle(): void {
  s_angle.value = toggleTool(measurementAngleTool);
  s_length.value = false;
  s_polygon.value = false;
}

function length(): void {
  s_angle.value = false;
  s_length.value = toggleTool(measurementLengthTool);
  s_polygon.value = false;
}

function polygon(): void {
  s_angle.value = false;
  s_length.value = false;
  s_polygon.value = toggleTool(measurementPolygonTool);
}

defineExpose({
  angle,
  length,
  polygon
});
defineOptions({ inheritAttrs: false });
</script>
