<template>
  <v-card v-bind="$attrs" color="background" flat tile>
    <DrawerTitle :title="t('labels.annotationTools')" />
    <v-card-text class="px-2 pb-4">
      <v-tabs :model-value="activeIndex" fixed-tabs :mandatory="false">
        <v-tab v-for="item in tabs" width="45%" @click="item.click">
          <v-icon :icon="item.icon" />
          <v-tooltip location="bottom" activator="parent" open-delay="1000">
            {{ item.tooltip }}
            {{ translateTooltipShortcut(item.tooltipShortcut) }}
          </v-tooltip>
        </v-tab>
      </v-tabs>
      <v-snackbar v-model="s_create" variant="flat" transition="slide-y-reverse-transition" class="mb-3">
        <v-icon class="minsk-500 pr-3" icon="arrow_selector_tool" />
        <span class="shark-950 text-center">{{ t('texts.annotationMoveHelp') }}</span>
        <template #actions>
          <v-icon class="ml-auto mr-3 shark-400" icon="close" size="small" variant="flat" @click="s_create = false" />
        </template>
      </v-snackbar>
      <v-snackbar v-model="s_move" variant="flat" transition="slide-y-reverse-transition" class="mb-3">
        <v-icon class="minsk-500 pr-3" icon="drag_pan" />
        <span class="shark-950 text-center">{{ t('texts.annotationMoveHelp') }}</span>
        <template #actions>
          <v-icon class="ml-auto mr-3 shark-400" icon="close" size="small" variant="flat" @click="s_move = false" />
        </template>
      </v-snackbar>
    </v-card-text>
  </v-card>
  <AnnotationCreateModal v-model="m_annotationCreate" :annotation="annotation!" :return-to="returnTo" />
  <AnnotationDeleteSnackbar v-model="s_annotationDelete" />
</template>

<script setup lang="ts">
import { computed, onBeforeUnmount, ref, watch } from 'vue';
import { useToolStore } from '@/stores/tool.store';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { SHORTCUT_TEXT, translateTooltipShortcut } from '@/functions/translateTooltipShortcut';
import { useViewerStore } from '@/stores/viewer.store';
import { useToolGroup } from '@/composables/useToolGroup';

const { t } = useI18n();
const { annotationCreateTool, annotationMoveTool } = useToolStore();
const { activeTool, activeIndex, toggleTool } = useToolGroup(annotationCreateTool, annotationMoveTool);
const { s_annotationDelete } = storeToRefs(useViewerStore());

const m_annotationCreate = ref<boolean>(false);
const s_create = ref<boolean>(false);
const s_move = ref<boolean>(false);

const annotation = computed(() => annotationCreateTool.annotation.value);

const returnTo = computed(() => annotationCreateTool.returnTo.value);

const tabs = computed(() => [
  {
    icon: 'edit_square',
    click: create,
    tooltip: t('labels.create'),
    tooltipShortcut: SHORTCUT_TEXT.c
  },
  {
    icon: 'drag_pan',
    click: move,
    tooltip: t('labels.move'),
    tooltipShortcut: SHORTCUT_TEXT.m
  }
]);

watch(annotationCreateTool.annotation, (value) => {
  if (value) {
    m_annotationCreate.value = true;
  }
});

watch(annotationCreateTool.isActive, (value) => {
  if (!value) {
    m_annotationCreate.value = false;
  }
});

watch(m_annotationCreate, (isOpen) => {
  if (!isOpen) {
    annotationCreateTool.isActive.value = false;
  }
});

onBeforeUnmount(() => {
  activeTool.value = null;
});

function create(): void {
  s_create.value = toggleTool(annotationCreateTool);
  s_move.value = false;
}

function move(): void {
  s_create.value = false;
  s_move.value = toggleTool(annotationMoveTool);
}

defineExpose({ create, move });

defineOptions({ inheritAttrs: false });
</script>
