<template>
  <Button
    :isActive="activeTool === 'cropPage' && !isMobileDevice"
    v-bind="{ ...item }"
    :onClick="onClick"
    :title="$t('header.cropPage')"
  >
    <CropPageIcon />
  </Button>
</template>

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

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

const activeTool = computed(() => useDocument.getActiveTool)

const onClick = () => {
  popoverTool && popoverTool[0].setShow(false)
  useDocument.setToolState(activeTool.value === 'cropPage' ? '' : 'cropPage')
  if (activeTool.value === 'cropPage') {
    useViewer.resetPanels()
    useViewer.setActiveToolMode('view')
  }

  switchTool(0)
  switchAnnotationEditorMode(0)

  useViewer.closeActiveStickNote()
  useViewer.setSearchStatus(false)
  useViewer.toggleActiveHand(false)
}
</script>
