<template>
  <Button
    :isActive="isActive"
    img="icon-compare"
    v-bind="{ ...item }"
    :onClick="onClick"
  />
</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.getActiveElementTab('leftPanel') === 'COMPARISON'
  })
  const onClick = () => {
    if (isActive.value) {
      useViewer.setActiveElementTab('leftPanel', 'THUMBS')
    } else {
      useViewer.setActiveElementTab('leftPanel', 'COMPARISON')
    }
    const isOpen = useViewer.isElementOpen('leftPanel')
    if (isOpen) return
    useViewer.openElement('leftPanel')
  }
</script>
