<template>
  <div>
    <div class="control">
      <label class="control__label">{{
        $t('tableJSONImporter.fileLabel')
      }}</label>
      <div class="control__description">
        {{ $t('tableJSONImporter.fileDescription') }}
        <pre>
[
  {
    "to": "Tove",
    "from": "Jani",
    "heading": "Reminder",
    "body": "Don't forget me this weekend!"
  },
  {
    "to": "Bram",
    "from": "Nigel",
    "heading": "Reminder",
    "body": "Don't forget about the export feature this week"
  }
]
        </pre>
      </div>
      <div class="control__elements">
        <div class="file-upload">
          <input
            v-show="false"
            ref="file"
            type="file"
            accept=".json"
            @change="select($event)"
          />
          <a
            class="button button--large button--ghost file-upload__button"
            :class="{ 'button--loading': state !== null }"
            @click.prevent="$refs.file.click($event)"
          >
            <i class="fas fa-cloud-upload-alt"></i>
            {{ $t('tableJSONImporter.chooseButton') }}
          </a>
          <div v-if="state === null" class="file-upload__file">
            {{ filename }}
          </div>
          <template v-else>
            <ProgressBar
              :value="fileLoadingProgress"
              :show-value="state === 'loading'"
              :status="
                state === 'loading' ? $t('importer.loading') : stateTitle
              "
            />
          </template>
        </div>
        <div v-if="$v.filename.$error" class="error">
          {{ $t('error.fieldRequired') }}
        </div>
      </div>
    </div>
    <div v-if="filename !== ''" class="control">
      <label class="control__label">{{
        $t('tableJSONImporter.encodingLabel')
      }}</label>
      <div class="control__elements">
        <CharsetDropdown
          v-model="encoding"
          :disabled="isDisabled"
          @input="reload()"
        ></CharsetDropdown>
      </div>
    </div>
    <Alert
      v-if="error !== ''"
      :title="$t('common.wrong')"
      type="error"
      icon="exclamation"
    >
      {{ error }}
    </Alert>
    <TableImporterPreview
      v-if="error === '' && Object.keys(preview).length !== 0"
      :preview="preview"
    ></TableImporterPreview>
  </div>
</template>

<script>
import { required } from 'vuelidate/lib/validators'

import form from '@baserow/modules/core/mixins/form'
import CharsetDropdown from '@baserow/modules/core/components/helpers/CharsetDropdown'
import importer from '@baserow/modules/database/mixins/importer'
import TableImporterPreview from '@baserow/modules/database/components/table/TableImporterPreview'

export default {
  name: 'TableCSVImporter',
  components: { TableImporterPreview, CharsetDropdown },
  mixins: [form, importer],
  data() {
    return {
      encoding: 'utf-8',
      filename: '',
      rawData: null,
    }
  },
  validations: {
    values: {
      getData: { required },
    },
    filename: { required },
  },
  computed: {
    isDisabled() {
      return this.disabled || this.state !== null
    },
  },
  methods: {
    /**
     * Method that is called when a file has been chosen. It will check if the file is
     * not larger than 15MB. Otherwise it will take a long time and possibly a crash
     * if so many entries have to be loaded into memory. If the file is valid, the
     * contents will be loaded into memory and the reload method will be called which
     * parses the content.
     */
    select(event) {
      if (event.target.files.length === 0) {
        return
      }

      const file = event.target.files[0]

      const maxSize =
        parseInt(this.$env.BASEROW_MAX_IMPORT_FILE_SIZE_MB, 10) * 1024 * 1024

      if (file.size > maxSize) {
        this.filename = ''
        this.handleImporterError(
          this.$t('tableJSONImporter.limitFileSize', {
            limit: this.$env.BASEROW_MAX_IMPORT_FILE_SIZE_MB,
          })
        )
      } else {
        this.state = 'loading'
        this.$emit('changed')
        this.filename = file.name
        const reader = new FileReader()
        reader.addEventListener('progress', (event) => {
          this.fileLoadingProgress = (event.loaded / event.total) * 100
        })
        reader.addEventListener('load', (event) => {
          this.rawData = event.target.result
          this.fileLoadingProgress = 100
          this.reload()
        })
        reader.readAsArrayBuffer(event.target.files[0])
      }
    },
    async reload() {
      let json
      this.resetImporterState()

      try {
        const decoder = new TextDecoder(this.encoding)
        this.state = 'parsing'
        await this.$ensureRender()
        const decoded = decoder.decode(this.rawData)

        await this.$ensureRender()
        json = JSON.parse(decoded)
      } catch (error) {
        this.handleImporterError(
          this.$t('tableJSONImporter.processingError', {
            error: error.message,
          })
        )
        return
      }

      if (json.length === 0) {
        this.handleImporterError(this.$t('tableJSONImporter.emptyError'))
        return
      }

      if (!Array.isArray(json)) {
        this.handleImporterError(this.$t('tableJSONImporter.arrayError'))
        return
      }

      const limit = this.$env.INITIAL_TABLE_DATA_LIMIT
      if (limit !== null && json.length > limit - 1) {
        this.handleImporterError(
          this.$t('tableJSONImporter.limitError', {
            limit,
          })
        )
        return
      }

      const header = []
      const data = []

      await this.$ensureRender()
      json.forEach((entry) => {
        const keys = Object.keys(entry)
        const row = []

        keys.forEach((key) => {
          if (!header.includes(key)) {
            header.push(key)
          }
        })

        header.forEach((key) => {
          const exists = Object.prototype.hasOwnProperty.call(entry, key)
          const value =
            exists && entry[key] !== null ? entry[key].toString() : ''
          row.push(value)
        })

        data.push(row)
      })

      this.values.header = this.prepareHeader(header, data)
      this.values.getData = () => {
        return data
      }
      this.state = null
      this.preview = this.getPreview(this.values.header, data)
    },
  },
}
</script>