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

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

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

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

const { t } = useI18n();
const { name } = useViewName(props.view);
const viewer3cr = useViewer3cr();

const text = computed(() => {
  return isFullscreen.value ? t('labels.fullscreenExit') : t('labels.fullscreenEnter', { view: name.value });
});

const icon = computed(() => {
  return isFullscreen.value ? 'fullscreen_exit' : 'fullscreen';
});

const action = computed(() => {
  return isFullscreen.value ? exitFullscreen : fullscreen;
});

async function fullscreen(): Promise<void> {
  previousLayout.value = scanState.value.Layout.PositionData;
  await viewer3cr.layouts(LayoutActions.lo01);
  await viewer3cr.viewSelection(`vs_0${props.view + 1}` as ViewSelectionActions);
}

async function exitFullscreen(): Promise<void> {
  const message = { Version: '0.0.0', PositionData: previousLayout.value };
  await viewer3cr.customLayout({ message });
  previousLayout.value = [];
}
</script>
