<template>
  <b-modal
    id="importfeed"
    ref="importFeed"
    :title="getTranslatedLabel('Import Subscriptions from OPML file')"
    centered
    @hidden="onHidden"
  >
    <b-form-file
      v-model="file"
      :placeholder="getTranslatedLabel('Choose a file')"
      accept=".xml, .opml"
    />
    <b-form-text id="inputLiveHelp">
      {{ $t('OPML is a standard format to import or export feed subscriptions You can export OPML files from other readers and import it') }}
    </b-form-text>
    <div slot="modal-footer">
      <button
        type="button"
        class="btn btn-secondary mr-3"
        @click="hideModal"
      >
        {{ $t('Close') }}
      </button>
      <button
        type="button"
        class="btn btn-primary"
        :disabled="disableImport"
        @click="importFeed"
      >
        {{ $t('Import') }}
      </button>
    </div>
  </b-modal>
</template>
<script>
import { parseOPML } from '../services/opml'
import helper from '../services/helpers'

export default {
  data () {
    return {
      file: null
    }
  },
  computed: {
    disableImport () {
      return this.$store.state.Setting.offline
    }
  },
  methods: {
    getTranslatedLabel (val) {
      return this.$options.filters.t(val)
    },
    hideModal () {
      this.$refs.importFeed.hide()
    },
    onHidden () {
      this.file = null
    },
    importFeed () {
      this.$parent.$refs.topProgress.start()
      window.fs.readFile(this.file.path, 'utf8', (err, data) => {
        if (err) {
          this.$toasted.show('Oops! something went wrong', {
            theme: 'outline',
            position: 'top-center',
            duration: 3000
          })
        }
        const parsedData = parseOPML(data).filter(item => item !== null)
        helper.subscribe(parsedData, null, false, true).then(() => {
          this.$parent.$refs.topProgress.done()
        })
      })

      this.file = null
      this.hideModal()
    }
  }
}
</script>
