<template>
  <Action
    :text="text"
    icon="swap_vert"
    :variant="variant"
    @click="flipVertical"
  />
</template>

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

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

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

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

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

const vertical = computed(() => {
  return isVerticalFlip(props.view);
});

async function flipVertical(): Promise<void> {
  const message: FlipValue = {
    Version: '0.0.0',
    View: props.view,
    Flipped: !vertical.value,
  };
  await viewer3cr.flipVertically({ message });
}
</script>
