<template>
  <div class="security-toolbar">
    <n-popover
      ref="securityPopover"
      placement="bottom"
      trigger="click"
      :show-arrow="false"
      to="#outerContainer"
      :raw="true"
      :z-index="4"
      class="security-popover"
    >
      <template #trigger>
        <Button :class="{ active: showSecurityPopover, disabled: ['redaction', 'remove'].includes(activeTool) }">
          <span>{{ $t('security.pwdProtection') }}</span>
          <Arrow class="arrow-left" />
        </Button>
      </template>
      <div class="drop-down">
        <div class="drop-item" @click="openSetPassword">{{ $t('security.encryption') }}</div>
        <div class="drop-item" :class="{ disabled: !filehasPwd && webviewerMode !== 'Standalone' }" @click="removePassword">{{ $t('security.decryption') }}</div>
      </div>
    </n-popover>

    <n-popover
      ref="redactionPopover"
      placement="bottom"
      trigger="click"
      :show-arrow="false"
      to="#outerContainer"
      :raw="true"
      :z-index="4"
      class="security-popover"
    >
      <template #trigger>
        <Button :class="{ active: showRedactionPopover || ['redaction', 'remove'].includes(activeTool) }">
          <span>{{ activeTool === 'redaction' ? $t('security.fillBlack') : activeTool === 'remove' ? $t('security.fillWhite') : $t('security.redaction') }}</span>
          <Arrow class="arrow-left" />
        </Button>
      </template>
      <div class="drop-down">
        <div class="drop-item" @click="handleTool('redaction')" data-element="redaction">{{ $t('security.fillBlack') }}</div>
        <div class="drop-item" @click="handleTool('remove')" data-element="remove">{{ $t('security.fillWhite') }}</div>
      </div>
    </n-popover>

    <Dialog :show="showTipDialog" :close="() => { showTipDialog = false }" class="redaction-tip-dialog">
      <Warning />
      <p class="title">{{ $t('security.caution') }}</p>
      <p>{{ $t('security.enterTip') }}</p>
      <div class="rect-button blue" @click="closeDialog">{{ $t('security.understand') }}</div>
    </Dialog>
  </div>
</template>

<script setup>
import { computed, ref, h, getCurrentInstance } from 'vue'
import { NPopover } from 'naive-ui'
import { useViewerStore } from '@/stores/modules/viewer'
import { useDocumentStore } from '@/stores/modules/document'
import core from '@/core'
import MessageError from '@/assets/icons/icon-message-error.svg'
import MessageSuccess from '@/assets/icons/icon-message-success.svg'

const instance = getCurrentInstance().appContext.app.config.globalProperties

const loading = ref(false)

const { switchTool, switchAnnotationEditorMode } = core
const { item } = defineProps(['item'])

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

const activeTool = computed(() => useDocument.getActiveTool)
const showSecurityPopover = computed(() => securityPopover.value && securityPopover.value.getMergedShow())
const showRedactionPopover = computed(() => redactionPopover.value && redactionPopover.value.getMergedShow())
const filehasPwd = computed(() => useDocument.getFilehasPwd)
const webviewerMode = computed(() => useViewer.getWebviewerMode)
const redactionPrompted = computed(() => useDocument.getRedactionPrompted)

const securityPopover = ref()
const redactionPopover = ref()
const showTipDialog = ref(false)
let firstEnterTool = ''

const changeActiveTool = (tool) => {
  useDocument.setToolState(tool)
  
  useViewer.toggleActiveHand(false)
  switchTool(0)
  
  switchAnnotationEditorMode(0)
}

const openSetPassword = () => {
  securityPopover.value.setShow(false)
  useViewer.openElement('setPasswordModal')
}

const removePassword = async () => {
  if (!filehasPwd.value && webviewerMode.value !== 'Standalone') return
  securityPopover.value.setShow(false)
  if (loading.value) { return }
  loading.value = true
  const data = await core.removePassword()
  if (!data) {
    window.$message.error(instance.$t('passwordDialog.removePwdFailure'), {
      duration: 3000,
      icon: () => h('img', { src: MessageError })
    })
  } else {
    window.$message.success(instance.$t('passwordDialog.removePwdSuccess'), {
      duration: 3000,
      icon: () => h('img', { src: MessageSuccess })
    })
  }
  loading.value = false
}

const handleTool = (tool) => {
  if (!redactionPrompted.value) {
    firstEnterTool = tool
    showTipDialog.value = true
  } else if (activeTool.value !== tool) {
    useDocument.setToolState(tool)
    useViewer.resetPanels()
  }
  redactionPopover.value.setShow(false)
}

const closeDialog = () => {
  showTipDialog.value = false
  useDocument.setRedactionPrompted(true)
  useDocument.setToolState(firstEnterTool)
  useViewer.setDisableHeader(true)
  useViewer.resetPanels()
}
</script>

<style lang="scss">
.security-toolbar {
  display: flex;

  .button {
    padding: 7px 11.5px 7px 15.5px;
    border-radius: 2px;

    .arrow-left {
      margin-left: 4px;
    }
  }

  .redaction-tip-dialog {
    .dialog-container {
      max-width: 284px;
      padding: 40px 16px;

      .close {
        position: absolute;
        margin: 0;
        top: 14px;
        right: 14px;
        color: #BABABA;

        &:hover {
          color: var(--c--text);
        }
      }

      main {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;

        .title {
          margin: 16px 0 8px;
          font-size: 16px;
          font-weight: 700;
          line-height: 24px;
          color: var(--c-active-text);
        }

        p {
          font-size: 14px;
          line-height: 16px;
          text-align: center;
        }

        .rect-button {
          margin-top: 24px;
          width: calc(100% - 32px);
          height: 40px;
          border-radius: 4px;
        }
      }
    }
  }
}

.security-popover {
  .drop-down {
    border-radius: 2px;
  }

  .drop-item {
    border-radius: 4px;

    &.disabled {
      cursor: not-allowed;

      &:hover {
        background-color: #999;
      }
    }
  }
}
</style>
