<template>
  <v-flex d-inline-flex class="export-data-btn">

    <JsonExcel
      :data="jsonItems"
      :fields="jsonHeaders"
      name="exported_data.xls">
      <v-btn
        fab
        small
        color="table-action-btn primary">
        <v-icon
          class="white--text text--darken-1">
          save_alt
        </v-icon>
      </v-btn>
    </JsonExcel>

    <v-btn
      fab
      small
      color="table-action-btn primary"
      @click="copyData">
      <v-icon
        class="white--text text--darken-1">
        file_copy
      </v-icon>
    </v-btn>

  </v-flex>
</template>

<script>
/*
    Export table content as csv file and to the clipboard.

    JsonExcel expects `data` a list of records, and `fields` as the keys
    used to access each value of the data:

    Example:
      data = [
        {
          'name': 'Joe',
          'phone': { 'mobile': '1-541-754-3010' },
        },
        {
          'name': 'Max',
          'phone': { 'mobile': '1-541-455-5603' }
        }
      ]

      fields = {
        'Complete name': 'name',
        'Mobile Number': 'phone.mobile',
      }

    Clipboard in the other way expects a string:

    Ex: "Complete Name\tMobile Number\nJoe\t1-541-754-3010\nMax\t1-541-455-5603
  */
import JsonExcel from 'vue-json-excel'
import { SHOW_ALERT } from '@/store/actions/alert'

export default {
  name: 'ExportData',
  components: {
    JsonExcel
  },
  props: {
    items: {
      type: Array,
      default: () => []
    },
    headers: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    jsonHeaders () {
      let jsonHeaders = {}
      this.headers.forEach(header => {
        let fieldName = header.text.replace(' ', '').toLowerCase()
        jsonHeaders[header.text] = fieldName
      })
      return jsonHeaders
    },

    jsonItems () {
      let jsonItems = this.items.map(item => {
        let fields = {}
        this.headers.forEach(header => {
          let fieldName = header.text.replace(' ', '').toLowerCase()
          fields[fieldName] = this.$get(item, header.value)
        })
        return fields
      })
      return jsonItems
    },

    tsvData () {
      const headers = Object.keys(this.jsonHeaders).join('\t')
      const rows = this.jsonItems.map(item => {
        return Object.values(this.jsonHeaders).map(fieldName => {
          let value = item[fieldName]
          return value ? value.toString().replace(/\r?\n|\r/g, '') : undefined
        }).join('\t')
      }).join('\n')
      return `${headers}\n${rows}`
    }
  },
  methods: {
    copyData () {
      const rowsNumber = this.jsonItems.length
      this.$copyText(this.tsvData).then(() => {
        this.$store.dispatch(SHOW_ALERT, {
          message: `${rowsNumber} records were copied into clipboard!`
        })
      }, () => {
        this.$store.dispatch(SHOW_ALERT, {
          error: 'Data could not be copied to clipboard'
        })
      })
    }
  }
}
</script>

<style lang="scss">
.v-btn.v-btn--floating {
  &.table-action-btn.v-btn {
    height: 30px;
    width: 30px;
    min-width: 30px;
    max-width: 30px;
  }
}
.export-data-btn {
  margin-left: 8px;
  padding: 0 !important;
}
</style>
