<template>
  <div class="delete-page-popup" v-if="show">
    <Dialog :show="show" :dialogName="dialogName">
      <Warning />
      <p>{{ $t('signatures.deleteConfirm') }}</p>

      <template #footer>
        <div class="rect-button white" @click="closeDialog">{{ $t('cancel') }}</div>
        <div class="rect-button blue" @click="handleDelete">{{ $t('ok') }}</div>
      </template>
    </Dialog>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useViewerStore } from '@/stores/modules/viewer'
import { useDocumentStore } from '@/stores/modules/document'
import core from '@/core'

const dialogName = 'deleteConfirmDialog'

const useViewer = useViewerStore()
const useDocument = useDocumentStore()

const show = computed(() => useViewer.isElementOpen(dialogName))
const selectedSignature = computed(() => useDocument.getSelectedSignature)

const closeDialog = () => {
  useViewer.closeElement(dialogName)
  useDocument.setSelectedSignature(null)
}

const handleDelete = () => {
  core.deleteSignature(JSON.parse(JSON.stringify(selectedSignature.value)))
  closeDialog()
  useViewer.setSignatureVerify(0)
}
</script>
