<template>
  <div class="signature-container">
    <div class="signature-title">{{ $t('leftPanel.signatureList') }}</div>
    <div v-if="signatures.length" class="signatures">
      <template v-for="(signature, index) in signatures" :key="index">
        <div class="signature" :class="{ 'focus': selectedSignature && selectedSignature.index === signature.index }" @click="goToPage(signature.pageIndex)">
          <template v-for="(signer, sIndex) in signature.signerList">
            <SignatureValid v-if="signer.isCertTrusted && signer.isSignVerified" />
            <SignatureInvalid v-else-if="signer.isCertTrusted || signer.isSignVerified" />
            <SignatureUnknown v-else />
            <span :title="signature.name">{{ (signer.certificateList[0].subject.CN ? signer.certificateList[0].subject.CN : '') + '\'s signature' }}</span>
            <n-popover
              placement="bottom-start"
              trigger="click"
              :show-arrow="false"
              to="#outerContainer"
              :raw="true"
              class="option-popover"
              :show="selectedSignature?.index === index && showPopover"
              @clickoutside="onOutsidePopover"
            >
              <template #trigger>
                <Button class="more" @click.stop="selectSign(signature, index)">
                  <MoreB />
                </Button>
              </template>
              <div class="drop-down">
                <div class="drop-item" @click="openDialog('signatureDetailsDialog')">{{ $t('leftPanel.signatureDetails') }}</div>
                <div class="drop-item" @click="openDialog('certificateViewerDialog')">{{ $t('leftPanel.certificationDetails') }}</div>
                <div class="drop-item" @click="openDialog('deleteConfirmDialog')">{{ $t('delete') }}</div>
              </div>
            </n-popover>
          </template>
        </div>
      </template>
    </div>
    <div v-else class="no-signatures">
      {{ $t('leftPanel.noSignatures') }}
    </div>
  </div>
</template>

<script setup>
import { computed, ref, getCurrentInstance } from 'vue'
import core from '@/core'
import { useViewerStore } from '@/stores/modules/viewer'
import { useDocumentStore } from '@/stores/modules/document'
import { NPopover } from 'naive-ui'

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

const signatures = computed(() => useDocument.getSignatures)
const selectedSignature = computed(() => useDocument.getSelectedSignature)

const showPopover = ref(false)

const setSignaturesList = (signatures) => {
  useDocument.initSignatures(signatures)
}
core.addEvent('getSignatures', setSignaturesList)

const goToPage = (page) => {
  if (page < 0) return
  core.pageNumberChanged({
    value: (page * 1 + 1).toString()
  })
}

const onOutsidePopover = () => {
  showPopover.value = false
  useDocument.setSelectedSignature(null)
}

const openDialog = (name) => {
  showPopover.value = false
  useViewer.openElement(name)
}

const selectSign = (signature, index) => {
  showPopover.value = true
  signature.index = index
  useDocument.setSelectedSignature(signature)
}
</script>

<style lang="scss">
.signature-container {
  display: flex;
  flex-direction: column;
  height: 100%;

  .signature-title {
    margin: 0;
    padding: 9px 16px;
    line-height: 17px;
    font-size: 14px;
    font-weight: bold;
    color: var(--c-side-title);
  }

  .signatures {
    flex-grow: 1;
    overflow-y: auto;

    .signature {
      display: flex;
      align-items: center;
      padding: 6px 16px;
      cursor: default;
      color: var(--c-icon-blue);

      &:hover, &.focus {
        background-color: var(--c-side-header-active);
      }

      span {
        margin-left: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
        line-height: 16px;
        color: var(--c-right-side-header-text);
      }

      svg {
        min-width: 20px;
      }

      .more {
        margin-left: auto;
        padding: 0;
        margin-right: 0;
        border-radius: 2px;
      }
    }
  }

  .no-signatures {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    text-align: center;
    font-weight: 700;
    color: var(--c-side-text);
    font-size: 14px;
    line-height: 16px;
  }
}
.option-popover .drop-down .drop-item {
  padding: 6px 8px;
}
</style>
