<template>
  <v-dialog
    v-model="modal"
    width="535"
  >
    <v-card>
      <v-card-title class="px-6 pb-2 pt-4">
        <span>{{ t('labels.mcadDelete') }}</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.mcadDeleteConfirm') }}</span>
      </v-card-text>
      <v-card-actions class="px-6 pt-0 pb-4">
        <v-spacer />
        <v-btn
          variant="plain"
          data-testid="close"
          @click="modal = false"
        >
          <span>{{ t('labels.cancel') }}</span>
        </v-btn>
        <v-btn
          color="amaranth_600"
          data-testid="delete"
          variant="flat"
          @click="deleteMcadObject"
        >
          <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 { useI18n } from 'vue-i18n';
import { DataOverlayMcad } from '@3cr/viewer-types-ts';

interface Props {
  mcad: DataOverlayMcad | undefined;
}

const props = defineProps<Props>();

const { t } = useI18n();
const viewer3cr = useViewer3cr();

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

async function deleteMcadObject(): Promise<void> {
  const message = { Version: '0.0.0', Id: props.mcad!.Id };
  await viewer3cr.removeMcadObject({ message });
  modal.value = false;
}
</script>
