<template>
  <v-menu data-testid="menu" v-model="menuState" :close-on-content-click="false">
    <template #activator="{ props: menu }">
      <Action v-bind="menu" :text="t('labels.zoom')" icon="search" :variant="variant" />
    </template>
    <v-list>
      <v-list-item data-testid="zoom-in" prepend-icon="zoom_in" @click.stop="zoomIn">
        <v-list-item-title>{{ t('labels.zoomIn') }}</v-list-item-title>
      </v-list-item>
      <v-list-item data-testid="zoom-out" prepend-icon="zoom_out" @click.stop="zoomOut">
        <v-list-item-title>{{ t('labels.zoomOut') }}</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-menu>
</template>

<script setup lang="ts">
import { MovementData, ScanView } from '@3cr/types-ts';
import { computed, ref } from 'vue';
import { useViewer3cr } from '@/composables/useViewer3cr';
import { useI18n } from 'vue-i18n';

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

type Emits = {
  'update:modal': [value: boolean];
};

const props = withDefaults(defineProps<Props>(), {
  variant: 'button',
  percentage: 10
});

const emit = defineEmits<Emits>();

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

const menu = ref<boolean>(false);

const menuState = computed({
  get(): boolean {
    return menu.value;
  },
  set(value: boolean): void {
    menu.value = value;
    emit('update:modal', value);
  }
});

async function zoomOut(): Promise<void> {
  const message: MovementData = {
    Version: '0.0.0',
    View: props.view,
    Movement: props.percentage
  };
  await viewer3cr.zoomOut({ message });
}

async function zoomIn(): Promise<void> {
  const message: MovementData = {
    Version: '0.0.0',
    View: props.view,
    Movement: props.percentage
  };
  await viewer3cr.zoomIn({ message });
}
</script>

<style scoped lang="scss">
.v-list-item {
  user-select: none;
}
</style>
