<template>
  <Button class="with-text" :title="$t('header.textField')" :class="{ active: activeTool === 'textfield' }" @click="changeActiveTool('textfield')">
    <TextFieldIcon />
    <span>{{ $t('header.textField') }}</span>
  </Button>
</template>

<script setup>
  import { computed } from 'vue'
  import { useViewerStore } from '@/stores/modules/viewer'
  import { useDocumentStore } from '@/stores/modules/document'
  import core from '@/core'
  const { switchTool, switchAnnotationEditorMode } = core

  const { item } = defineProps(['item'])

  const useDocument = useDocumentStore()
  const useViewer = useViewerStore()

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

  const changeActiveTool = (tool) => {
    useDocument.setToolState(tool)
    
    useViewer.toggleActiveHand(false)
    switchTool(0)
    
    switchAnnotationEditorMode(0)
  }
</script>
