<template>
  <Button
    :isActive="isActive"
    img="icon-ruler"
    v-bind="{ ...item }"
    :onClick="onClick"
  />
</template>

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

  const isActive = computed(() => {
    return useViewer.getActiveMeasure
  })
  const onClick = () => {
    useViewer.toggleActiveMeasure()
    const mode = isActive.value ? 15 : 0
    switchAnnotationEditorMode(mode)
    switchTool(0)
    useViewer.closeActiveHand()
    useViewer.closeActiveStickNote()
  }
</script>
