<template>
  <div class="compare-buttons">
    <div class="rect-button blue" :class="{ disabled: !compareFiles }" @click="openDialog">{{ $t('compare.startCompare') }}</div>
    <div class="rect-button white" @click="exitCompare">{{ $t('compare.exit') }}</div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useViewerStore } from '@/stores/modules/viewer'
import { useDocumentStore } from '@/stores/modules/document'
import core from '@/core'
const { loadDocument } = core

const useViewer = useViewerStore()
const useDocument = useDocumentStore()

const compareStatus = computed(() => useViewer.getCompareStatus)
const compareFiles = computed(() => useDocument.getCompareFile('oldFile') && useDocument.getCompareFile('newFile') && compareStatus.value !== 'finished')
const currentPdfData = computed(() => useDocument.getCurrentPdfData)

const exitCompare = () => {
  useViewer.closeElement('compareSettingDialog')
  useDocument.setToolState('')
  useViewer.setActiveToolMode('view')

  if (compareStatus.value) {
    uploadPdf()
  }

  useViewer.setCompareStatus('')
}

const uploadPdf = async () => {
  if (currentPdfData.value) {
    useViewer.setUploadLoading(true)
    useDocument.setTotalPages(0)
    try {
      const data = currentPdfData.value
      data.options.notUpdatePwd = true
      await loadDocument(data.pdf, data.options)
    } catch (error) {
      console.log(error)
      if (error === 'invalid_file_error' || error === 'no_password_given' || error === 'incorrect_password') {
        useViewer.setUpload(false)
        useDocument.setLoadingProgress(0)
        useViewer.resetSetting()
        const openFileInput = document.getElementById("fileInput")
        openFileInput.value = ''
        useDocument.setCurrentPdfData()
        return
      }
    }
    useViewer.setUploadLoading(false)

    const totalPages = core.getPagesCount()
    const scale = core.getScale()
    useDocument.setTotalPages(totalPages)
    useViewer.setCurrentPage(1)
    useViewer.setCurrentScale(scale)
  }
}

const openDialog = () => {
  useViewer.openElement('compareSettingDialog')
  useDocument.initCompareSetting()
  useViewer.setCompareMode('content')
}
</script>

<style lang="scss">
.rect-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  cursor: pointer;
  &.disabled {
    opacity: 0.4;
    pointer-events: none;
  }
  &.blue {
    color: #fff;
    border-color: var(--c-popup-bg-active);
    background-color: var(--c-popup-bg-active);
  }
  &.white {
    color: var(--c-popup-bg-active);
    border-color: var(--c-popup-bg-active);
    background-color: var(--c-side-header-bg);
  }
  & + .rect-button {
    margin-left: 8px;
  }
}

.compare-buttons {
  display: flex;
  flex: 1;
}
@media screen and (min-width: 768px) {
  .rect-button {
    &.blue:hover {
      opacity: 0.8;
    }
    &.white:hover {
      color: #fff;
      background-color: var(--c-popup-bg-active);
    }
  }
}
</style>
