<template>
  <v-menu data-testid="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="activator" :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="annotation_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="updateAnnotation">
        <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="deleteAnnotation">
        <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>
  <annotation-update-modal v-model="m_update" :annotation="annotation" />
  <annotation-delete-modal v-model="m_delete" :annotation="annotation" />
</template>

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

interface Props {
  annotation: DataOverlayAnnotation;
}

const props = defineProps<Props>();

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

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

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

function updateAnnotation(): void {
  m_update.value = true;
}

function deleteAnnotation(): void {
  m_delete.value = true;
}

async function focus(): Promise<void> {
  const { X, Y, Z } = props.annotation.Position;
  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>
