<template>
  <Button @click="downloadFile" :title="$t('header.download')">
    <Download />
  </Button>
</template>

<script setup>
  import core from '@/core'
  import { computed } from 'vue';
  import { useViewerStore } from '@/stores/modules/viewer'
  
  const useViewer = useViewerStore()

  const toolMode = computed(() => useViewer.getToolMode)
  const compareMode = computed(() => useViewer.getCompareMode)

  const { download } = core

  const downloadFile = async () => {
    if (toolMode.value === 'compare' && compareMode.value === 'content') {
      useViewer.openElement('downloadSettingDialog')
      return
    }
    useViewer.setDownloading(true)
    try {
      const res = await download()
      useViewer.setDownloading(false)
      if (!res) {
        useViewer.setDownloadError('Downloaded')
      }
    } catch (error) {
      console.log(error)
    }
  }
</script>

<style lang="scss">
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
