<template>
  <v-menu v-model="m_open">
    <template #activator="{ props: menu }">
      <v-tooltip
        location="bottom"
        open-delay="1000"
      >
        <template #activator="{ props: tooltip }">
          <v-btn
            v-bind="mergeProps(menu, tooltip)"
            data-testid="menu"
            :icon="true"
            size="24"
            variant="text"
          >
            <v-icon
              icon="more_vert"
              size="16"
              color="shark_400"
            />
          </v-btn>
        </template>
        <span>{{ t('labels.moreActions') }}</span>
      </v-tooltip>
    </template>
    <v-list id="measurement-menu">
      <v-list-item
        class="px-4 py-2"
        data-testid="focus"
        prepend-icon="center_focus_strong"
        @click="focus"
      >
        <v-list-item-title>{{ t('labels.focus') }}</v-list-item-title>
        <v-spacer />
        <v-list-item-subtitle class="ml-4">{{
          translateTooltipShortcut(SHORTCUT_TEXT.f)
        }}</v-list-item-subtitle>
      </v-list-item>
      <v-list-item
        class="px-4 py-2"
        data-testid="update"
        prepend-icon="edit_square"
        @click="edit"
      >
        <v-list-item-title>{{ t('labels.edit') }}</v-list-item-title>
        <v-spacer />
        <v-list-item-subtitle class="ml-4">{{
          translateTooltipShortcut(SHORTCUT_TEXT.e)
        }}</v-list-item-subtitle>
      </v-list-item>
      <v-list-item
        class="px-4 py-2"
        data-testid="delete"
        prepend-icon="delete"
        @click="deleteMeasurement"
      >
        <v-list-item-title>{{ t('labels.delete') }}</v-list-item-title>
        <v-spacer />
        <v-list-item-subtitle class="ml-4">{{
          translateTooltipShortcut(SHORTCUT_TEXT.del)
        }}</v-list-item-subtitle>
      </v-list-item>
    </v-list>
  </v-menu>
  <measurement-delete-modal
    v-model="m_delete"
    :measurement="measurement"
  />
</template>

<script setup lang="ts">
import { mergeProps, ref, watch } from 'vue';
import { initialScanState } from '@/models/scanState';
import { SlidersActions } from '@3cr/types-ts';
import { useViewer3cr } from '@/composables/useViewer3cr';
import {
  defineHotkeys,
  Hotkeys,
  HotkeyScope,
  resetScope,
} from '@/functions/HotkeyScope';
import { useI18n } from 'vue-i18n';
import {
  SHORTCUT_TEXT,
  translateTooltipShortcut,
} from '@/functions/translateTooltipShortcut';
import { DataOverlayMeasurement } from '@3cr/viewer-types-ts';

interface Props {
  measurement: DataOverlayMeasurement;
}

const props = defineProps<Props>();

const { t } = useI18n();
const viewer3cr = useViewer3cr();

const m_delete = ref<boolean>(false);
const m_open = ref<boolean>(false);

watch(m_open, (isOpen: boolean) => {
  if (isOpen) {
    defineHotkeys(HotkeyScope.MEASUREMENT_MENU, {
      [Hotkeys.CTRL_SHIFT_F]: async () => {
        await focus();
      },
      [Hotkeys.CTRL_SHIFT_E]: async () => {
        edit();
      },
      [Hotkeys.CTRL_SHIFT_DEL]: async () => {
        await deleteMeasurement();
      },
    });
  } else {
    resetScope(HotkeyScope.MEASUREMENT_MENU);
  }
});

async function deleteMeasurement(): Promise<void> {
  m_delete.value = true;
}

function edit(): void {
  // TODO: implement
}

async function focus(): Promise<void> {
  const { X, Y, Z } = props.measurement.Points[0];
  const { XSpacing, YSpacing, ZSpacing } = initialScanState.value;
  await viewer3cr.sliderHandler(SlidersActions.sl09, Z / (ZSpacing || 1));
  await viewer3cr.sliderHandler(SlidersActions.sl12, X / (XSpacing || 1));
  await viewer3cr.sliderHandler(SlidersActions.sl15, Y / (YSpacing || 1));
}
</script>

<style scoped lang="scss">
:deep(.v-list-item__content) {
  display: flex;
  align-items: baseline;
  width: 100%;
}
</style>
