<template>
  <v-card>
    <v-card-title>
      {{ $t('dataset.exportDataTitle') }}
    </v-card-title>
    <v-card-text>
      <v-overlay :value="isProcessing">
        <v-progress-circular indeterminate size="64" />
      </v-overlay>
      <v-form ref="form" v-model="valid">
        <v-select
          v-model="selectedFormat"
          :items="formats"
          hide-details="auto"
          item-text="name"
          label="File format"
          outlined
          :rules="fileFormatRules($t('rules.fileFormatRules'))"
        />
        <v-sheet
          v-if="selectedFormat"
          :dark="!$vuetify.theme.dark"
          :light="$vuetify.theme.dark"
          class="mt-2 pa-5"
        >
          <pre>{{ example }}</pre>
        </v-sheet>
        <v-checkbox v-model="exportApproved" label="Export only approved documents" hide-details />
      </v-form>
    </v-card-text>
    <v-card-actions>
      <v-btn class="text-capitalize ms-2 primary" :disabled="!valid" @click="downloadRequest">
        {{ $t('generic.export') }}
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<script lang="ts">
import Vue from 'vue'
import { fileFormatRules } from '@/rules/index'
import { FormatDTO } from '~/services/application/download/formatData'

export default Vue.extend({
  layout: 'project',

  validate({ params }) {
    return /^\d+$/.test(params.id)
  },

  data() {
    return {
      exportApproved: false,
      file: null,
      fileFormatRules,
      formats: [] as FormatDTO[],
      isProcessing: false,
      polling: null,
      selectedFormat: null as any,
      taskId: '',
      valid: false
    }
  },

  computed: {
    projectId() {
      return this.$route.params.id
    },

    example(): string {
      const item = this.formats.find((item: FormatDTO) => item.name === this.selectedFormat)
      return item!.example.trim()
    }
  },

  async created() {
    this.formats = await this.$services.downloadFormat.list(this.projectId)
  },

  beforeDestroy() {
    // @ts-ignore
    clearInterval(this.polling)
  },

  methods: {
    reset() {
      ;(this.$refs.form as HTMLFormElement).reset()
      this.taskId = ''
      this.exportApproved = false
      this.selectedFormat = null
      this.isProcessing = false
    },

    async downloadRequest() {
      this.isProcessing = true
      this.taskId = await this.$services.download.request(
        this.projectId,
        this.selectedFormat,
        this.exportApproved
      )
      this.pollData()
    },

    pollData() {
      // @ts-ignore
      this.polling = setInterval(async () => {
        if (this.taskId) {
          const res = await this.$services.taskStatus.get(this.taskId)
          if (res.ready) {
            this.$services.download.download(this.projectId, this.taskId)
            this.reset()
          }
        }
      }, 1000)
    }
  }
})
</script>
