<template>
  <div class="file-text"><span class="circle circle-red"></span><p>First File</p></div>
  <button @click="browseFiles(firstFileInput)">Select File</button>
  <input ref="firstFileInput" class="hidden" type="file" @change="loadFile($event, 'firstFile')" accept=".pdf" name="compare"/>
  <p>{{ files.firstFile && files.firstFile.name }}</p>
  <div class="file-text"><span class="circle circle-blue"></span><p>Second File</p></div>
  <button @click="browseFiles(secondFileInput)">Select File</button>
  <input ref="secondFileInput" class="hidden" type="file" @change="loadFile($event, 'secondFile')" accept=".pdf" name="compare" />
  <p>{{ files.secondFile && files.secondFile.name }}</p>
  <button class="compare-button" :class="{ disabled }" @click="compareFile">
    Compare
    <Icon
      v-if="loading"
      glyph="icon-loading"
      :class="iconClassName"
    />
  </button>
</template>

<script setup>
  import { computed, reactive, ref } from 'vue'
  import { useAxios } from '@vueuse/integrations/useAxios'

  import { useViewerStore } from '@/stores/modules/viewer'
  import { useDocumentStore } from '@/stores/modules/document'
  import core from '@/core'
  const { loadDocument, getOptionUrl } = core

  const firstFileInput = ref()
  const secondFileInput = ref()
  const useViewer = useViewerStore()
  const useDocument = useDocumentStore()

  let files = reactive({
    firstFile: null,
    secondFile: null
  })

  const loading = ref(false)

  const browseFiles = (fileInput) => fileInput.click()

  const disabled = computed(() => !(files.firstFile && files.secondFile))

  const loadFile = (e, file) => {
    e.preventDefault();
    files[file] = e.target.files[0]
  }
  const compareFile = async () => {
    const optionUrl = getOptionUrl()
    if (loading.value) return
    if (!disabled.value) {
      loading.value  = true
      const formData = new FormData()
      formData.append('firstFile', files.firstFile)
      formData.append('secondFile', files.secondFile)
      const { data, isFinished } = await useAxios(`${optionUrl.compareBaseUrl || optionUrl.baseUrl}${optionUrl.compareUrl}`, {
        method: 'POST',
        data: formData,
        responseType: 'arraybuffer'
      })
      if (isFinished.value) {
        loading.value = false
        const options = {
          progress: useDocument.setLoadingProgress,
          pageChangedCallback: useViewer.setCurrentPage,
          scaleChangedCallback: useViewer.setCurrentScale,
          annotationsNumChangedCallback: useDocument.setAnnotationsCount,
          distanceChangedCallback: useDocument.setDistance
        }
        await loadDocument(data.value, options)
        
        useViewer.toggleElement('leftPanel')
        const totalPages = core.getPagesCount()
        const scale = core.getScale()
        useDocument.setTotalPages(totalPages)
        useViewer.setCurrentScale(scale)
        useViewer.setCurrentPage(1)
      }
    }
  }
</script>

<style lang="scss">
  @keyframes spinLoadingIcon {
    to {
      transform: rotate(360deg)
    }
  }
  .file-text {
    display: flex;
    align-items: center;
  }
  .circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 50%;
  }
  .circle-blue {
    background-color: rgb(0, 200, 200);
  }
  .circle-red {
    background-color: rgb(200, 0, 0);
  }
  .compare-button {
    background-color: rgb(85, 125, 215);
    color: #FFFFFF;
    border: none;
    line-height: 14px;
    &.disabled {
      opacity: 0.3;
    }
    .icon {
      width: 14px;
      height: 14px;
      margin-left: 5px;
      animation: spinLoadingIcon 1s steps(12, end) infinite;
    }
  }
</style>
