<template>
  <div class="search-container">
    <Button
      id="viewFind"
      v-bind="{ ...item }"
      :isActive="searchStatus && isLeftPanelOpen"
      :onClick="onClick"
      :class="{ disabled: !load }"
      :title="$t('header.search')"
    >
      <Search />
    </Button>
  </div>
</template>

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

  const searchStatus = computed(() => useViewer.getSearchStatus)
  const load = computed(() => useViewer.getUpload)

  const isLeftPanelOpen = computed(() => useViewer.isElementOpen('leftPanel'))
  const activeLeftPanelTab = computed(() => useViewer.getActiveElementTab('leftPanel'))

  const onClick = () => {
    core.webViewerNamedAction('Find')
    if (isLeftPanelOpen.value && activeLeftPanelTab.value !== 'SEARCH') {
      useViewer.setSearchStatus(true)
    } else if (isLeftPanelOpen.value) {
      useViewer.setSearchStatus(false)
      useViewer.toggleElement('leftPanel')
    } else {
      useViewer.setSearchStatus(true)
      useViewer.toggleElement('leftPanel')
    }
    useViewer.setActiveElementTab('leftPanel', 'SEARCH')
  }
</script>
