<template>
  <n-popover
    ref="popover"
    placement="bottom-start"
    trigger="click"
    :show-arrow="false"
    to="#outerContainer"
    :raw="true"
    :z-index="72"
    class="security-popover"
  >
    <template #trigger>
      <Button class="security-button" :class="{ active: showDropdown }">
        <span>{{ $t('header.security') }}</span>
        <Arrow class="arrow-left" />
      </Button>
    </template>
    <div class="drop-down">
      <div class="drop-item" @click="openSetPassword">{{ $t('header.setPassword') }}</div>
      <div class="drop-item" :class="{ disabled: !filehasPwd && webviewerMode !== 'Standalone' }" @click="removePassword">{{ $t('header.removePassword') }}</div>
    </div>
  </n-popover>
</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 popover = ref(null)

  const activeTool = computed(() => useDocument.getActiveTool)
  const showDropdown = computed(() => popover.value && popover.value.getMergedShow())
  const filehasPwd = computed(() => useDocument.getFilehasPwd)
  const webviewerMode = computed(() => useViewer.getWebviewerMode)

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

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

  const removePassword = async () => {
    if (!filehasPwd.value && webviewerMode.value !== 'Standalone') return
    popover.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
  }
</script>

<style lang="scss">
.security-button {
  padding: 7px 15px 7px 19px;
  border-radius: 2px;
  .arrow-left {
    margin-left: 4px;
  }
}
.security-popover {
  .drop-down {
    border-radius: 2px;
  }
  .drop-item {
    border-radius: 4px;
    &.disabled {
      cursor: not-allowed;
      &:hover {
        background-color: #999;
      }
    }
  }
}
</style>
