<template>
  <Action :text="text" icon="swap_horiz" :variant="variant" @click="flipHorizontal" />
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { FlipValue, ScanView } from '@3cr/types-ts';
import { isHorizontalFlip } 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 horizontal = computed(() => {
  return isHorizontalFlip(props.view);
});

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

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