<template>
  <Button
    :isActive="activeTool === 'cropPage'"
    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'

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

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

const onClick = () => {
  useDocument.setToolState(activeTool.value === 'cropPage' ? '' : 'cropPage')
  if (activeTool.value === 'cropPage') {
    useViewer.resetPanels()
    useViewer.setActiceToolMode('view')
  }

  switchTool(0)
  switchAnnotationEditorMode(0)

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