<template>
  <Button
    :isActive="activeTool === 'text'"
    v-bind="{ ...item }"
    :onClick="onClick"
    :title="$t('header.note')"
  >
    <Note />
  </Button>
</template>

<script setup>
  import { useViewerStore } from '@/stores/modules/viewer'
  import { useDocumentStore } from '@/stores/modules/document'
  import { computed } from 'vue'
  import core from '@/core'
  const { switchAnnotationEditorMode, switchTool } = core
  const useViewer = useViewerStore()
  const { item } = defineProps(['item'])
  const useDocument = useDocumentStore()

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

  const activeTool = computed(() => useDocument.getActiveTool)
  const isActive = computed(() => {
    return useViewer.getActiveStickNote
  })
  const onClick = () => {
    changeActiveTool('text')
    useViewer.toggleActiveStickNote()
    switchAnnotationEditorMode(0)
    switchTool(0)
    useViewer.closeActiveHand()
    useViewer.closeActiveMeasure()
  }
</script>
