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

<script setup>
  import { useViewerStore } from '@/stores/modules/viewer'
  import { computed } from 'vue'
  import core from '@/core'
  const useViewer = useViewerStore()
  const { item } = defineProps(['item'])
  
  const isActive = computed(() => {
    return useViewer.isElementOpen(item.element)
  })
  const activeLeftPanelTab = computed(() => useViewer.getActiveElementTab('leftPanel'))

  const onClick = () => {
    if (activeLeftPanelTab.value === 'SEARCH') {
      core.webViewerNamedAction('Find')
    }
    useViewer.toggleElement(item.element)
  }
</script>
