<template>
  <Action
    :text="t('labels.pan')"
    icon="pan_tool"
    :color="enabled ? 'blue-lighten-1' : 'white'"
    :variant="variant"
    @click="toggle"
    data-testid="button"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ScanView } from '@3cr/types-ts';
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 enabled = ref<boolean>(false);

async function toggle(): Promise<void> {
  const state = !enabled.value;
  const message = { Version: '0.0.0', View: props.view, Visibility: state };
  await viewer3cr.pan({ message });
  enabled.value = state;
}
</script>
