<template>
  <n-popover
    ref="popover"
    placement="bottom-start"
    trigger="click"
    :show-arrow="false"
    to="#outerContainer"
    :raw="true"
    :z-index="3"
    class="security-popover"
  >
    <template #trigger>
      <Button class="security-button" :class="{ active: showDropdown }">
        <span>Watermark</span>
        <Arrow class="arrow-left" />
      </Button>
    </template>
    <div class="drop-down">
      <div class="drop-item" @click="">Text Watermark</div>
      <div class="drop-item" @click="">Image Watermark</div>
      <div class="drop-item" @click="removeWatermark">Remove Watermark</div>
    </div>
  </n-popover>
</template>

<script setup>
  import { computed, ref, h } 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 { 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 changeActiveTool = (tool) => {
    useDocument.setToolState(tool)
    
    useViewer.toggleActiveHand(false)
    switchTool(0)
    
    switchAnnotationEditorMode(0)
  }

  const removeWatermark = () => {
    // window.$message.success('Setup Success', {
    //   duration: 3000,
    //   icon: () => h('img', { src: MessageSuccess })
    // })

    window.$message.error('Setup Failure', {
      duration: 3000,
      icon: () => h('img', { src: MessageError })
    })
  }
</script>