<template>
  <div class="signature-tool">
    <Button id="createSignFieldButton" :class="{ active: activeTool === 'signatureFields' }" @click="changeActiveTool('signatureFields')" :title="$t('header.createSignField')">
      <CreateSignField />
      <span>{{ $t('header.createSignField') }}</span>
    </Button>
    <Button :class="{ active: activeTool === 'addDigitalSign' }" @click="changeActiveTool('addDigitalSign')" :title="$t('header.addDigitalSign')">
      <AddDigitalSign />
      <span>{{ $t('header.addDigitalSign') }}</span>
    </Button>
    <Button :class="{ active: activeTool === 'addElectronicSign' }" @click="changeActiveTool('addElectronicSign')" :title="$t('header.addElectronicSign')">
      <AddElectronicSign />
      <span>{{ $t('header.addElectronicSign') }}</span>
    </Button>
    <Button @click="verifyDigitalSign" :title="$t('header.verifyDigitalSign')" :disabled="!signatures.length">
      <VerifyDigitalSign />
      <span>{{ $t('header.verifyDigitalSign') }}</span>
    </Button>
  </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 { switchTool, switchAnnotationEditorMode, verifySignature } = core

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

  const activeTool = computed(() => useDocument.getActiveTool)
  const signatures = computed(() => useDocument.getSignatures)

  const changeActiveTool = (tool) => {
    useDocument.setToolState(tool)

    useViewer.toggleActiveHand(false)
    switchTool(0)
    
    switchAnnotationEditorMode(0)
  }

  const openSignCreatePanel = () => {
    useViewer.toggleElement('signCreatePanel')
    useViewer.setActiveToolMode('sign')

    useViewer.toggleActiveHand(false)
    switchTool(0)
    
    switchAnnotationEditorMode(0)
    
    document.body.style.overflow = 'hidden'
  }

  const verifyDigitalSign = async () => {
    changeActiveTool('')

    await verifySignature()
    
    const signatureLists = signatures.value
    if (signatureLists.length === 0) return
    if (signatureLists.length === 1) {
      const isSignVerified = signatureLists[0].signerList[0].isSignVerified
      const isCertTrusted = signatureLists[0].signerList[0].isCertTrusted
      if (isSignVerified && isCertTrusted) {
        useViewer.setSignatureVerify(1)
      } else if (!isSignVerified) {
        useViewer.setSignatureVerify(2)
      } else if (isSignVerified && !isCertTrusted) {
        useViewer.setSignatureVerify(3)
      }
      return
    } else {
      for (let i = 0; i < signatureLists.length; i++) {
        const isSignVerified = signatureLists[i].signerList[0].isSignVerified
        const isCertTrusted = signatureLists[i].signerList[0].isCertTrusted
        if (isSignVerified && isCertTrusted) {
          continue
        } else if (!isSignVerified || !isCertTrusted) {
          useViewer.setSignatureVerify(2)
          return
        }
      }
    }
    
    useViewer.setSignatureVerify(1)
  }
</script>

<style lang="scss" scoped>
.signature-tool {
  display: flex;
  align-items: center;

  button {
    display: flex;
    align-items: center;
    font-family: Helvetica;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;

    &:last-child {
      margin-right: 0;
    }

    svg {
      min-width: 20px;
      margin-right: 8px;
    }

    span {
      white-space: nowrap;
    }
  }
}

@media screen and (max-width: 670px) {
  .signature-tool {
    width: 100%;
  }
}
</style>

