<template>
  <v-dialog
    v-model="modal"
    width="535"
  >
    <v-card>
      <v-card-title class="px-6 pb-2 pt-4">
        <span>{{ t('labels.annotationDelete') }}</span>
      </v-card-title>
      <v-card-text
        class="px-6 pt-0 pb-4"
        style="font-size: 14px; line-height: 20px; font-weight: 400"
      >
        <span>{{ t('texts.annotationDeleteConfirm') }}</span>
      </v-card-text>
      <v-card-actions class="px-6 pt-0">
        <v-spacer />
        <v-btn
          variant="plain"
          @click="modal = false"
        >
          <span>{{ t('labels.cancel') }}</span>
        </v-btn>
        <v-btn
          color="amaranth_600"
          variant="flat"
          @click="deleteAnnotation"
        >
          <span>{{ t('labels.confirm') }}</span>
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import { useViewer3cr } from '@/composables/useViewer3cr';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { useViewerStore } from '@/stores/viewer.store';
import { DataOverlayAnnotation } from '@3cr/viewer-types-ts';

interface Props {
  annotation: DataOverlayAnnotation;
}

const props = defineProps<Props>();

const { t } = useI18n();
const { s_annotationDelete } = storeToRefs(useViewerStore());
const viewer3cr = useViewer3cr();

const modal = defineModel<boolean>({ default: false });

async function deleteAnnotation(): Promise<void> {
  const message = { Version: '0.0.0', Id: props.annotation.Id };
  await viewer3cr.removeAnnotation({ message });
  s_annotationDelete.value = true;
  modal.value = false;
}
</script>
