<template>
  <v-overlay
    v-model="menuState"
    data-testid="menu"
    location-strategy="connected"
    location="end"
    origin="top start"
    target="#volume"
    :scrim="false"
  >
    <template #activator="{ props }">
      <Action v-bind="props" :text="text" icon="cut" :variant="variant" />
    </template>
    <v-card class="px-8 py-4 overflow-hidden" width="300">
      <DoubleSliderSelector v-model="tSlider" :label="t('enums.scanView.transverse')" v-bind="tMinMax" />
      <DoubleSliderSelector v-model="sSlider" :label="t('enums.scanView.sagittal')" v-bind="sMinMax" />
      <DoubleSliderSelector v-model="cSlider" :label="t('enums.scanView.coronal')" v-bind="cMinMax" />
    </v-card>
  </v-overlay>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { cMinMax, cSlider, sMinMax, sSlider, tMinMax, tSlider } from '@/models/scanState';
import DoubleSliderSelector from '@/components/shared/DoubleSliderSelector.vue';
import { ScanView } from '@3cr/types-ts';
import { useI18n } from 'vue-i18n';

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

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

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

const emit = defineEmits<Emits>();

const { t } = useI18n();

const menu = ref<boolean>(false);

const text = computed(() => {
  return t('labels.slice');
});

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