<template>
  <Button
    :isActive="isActive && !isMobileDevice"
    img="icon-hand-tool"
    v-bind="{ ...item }"
    :onClick="onClick"
    :title="$t('header.pan')"
  >
    <Pantool />
  </Button>
</template>

<script setup>
  import { useViewerStore } from '@/stores/modules/viewer'
  import { useDocumentStore } from '@/stores/modules/document'
  import { computed } from 'vue'
  import core from '@/core'
  import { isMobileDevice } from '@/helpers/device'

  const { switchTool, switchAnnotationEditorMode } = core
  const useViewer = useViewerStore()
  const useDocument = useDocumentStore()
  const { item, popoverTool } = defineProps(['item', 'popoverTool'])

  const isActive = computed(() => {
    return useViewer.getActiveHand
  })
  const onClick = () => {
    popoverTool && popoverTool[0].setShow(false)
    window.getSelection().empty()
    useViewer.toggleActiveHand(!isActive.value)
    const mode = isActive.value ? 1 : 0
    switchTool(mode)
    switchAnnotationEditorMode(0)
    useViewer.closeActiveStickNote()
    core.webViewerNamedAction('Find', 4)

    useDocument.setToolState('')
    useViewer.setSearchStatus(false)
  }
</script>
