<template>
  <div id="multi-excel">
    <transition name="slide-fade">
      <file-picker v-if="!filePicked" id="filePicker" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" v-on:vfp-file-added="fileAdded">
        <template v-slot:label>
          Alegeți un fișier Excel (xls / xlsx)
        </template>
      </file-picker>
      <div v-else>
        <h4 class="file-name">
          {{ fileName }}
          <b-button @click="reset" theme="primary" class="change-file">
            Alege alt fișier
          </b-button>
        </h4>
      </div>
    </transition>
    <transition name="slide-fade" appear>
      <h4 v-if="processing">
        Se încarcă <img src="/js/lib/ajax-loader.gif"/>
      </h4>
    </transition>
    <div v-if="workbookWrapper != null">
      <b-card no-body>
        <b-tabs card>
          <b-tab v-for="(sheetName, index) in workbookWrapper.workbook.SheetNames" :key="sheetName" :title="sheetName" :active="index === 0">
            <b-card-text>
              <sheet-sms-creator :sheet="workbookWrapper.workbook.Sheets[sheetName]" :max-message-size="maxMessageSize"></sheet-sms-creator>
            </b-card-text>
          </b-tab>
        </b-tabs>
      </b-card>
    </div>
  </div>
</template>

<script>
  module.exports = {
    name: 'MultiExcel',
    components: {
    },
    props: {
      maxMessageSize: Number
    },
    data: function() {
      return {
        filePicked: false,
        fileName: null,
        processing: false,
        workbookWrapper: null
      }
    },
    methods: {
      fileAdded: function(fileList) {
        if(fileList.length) {
          this.filePicked = true;
          this.processing = true;

          var f = fileList[0];

          this.fileName = f.name;

          var readAsBinaryStringAvailable = typeof FileReader !== "undefined" && (FileReader.prototype||{}).readAsBinaryString;

          // read the file
          var reader = new FileReader();

          reader.onload = readerEvent => {

            var data = readerEvent.target.result;

            if(!readAsBinaryStringAvailable) data = new Uint8Array(data);

            var worker = new Worker("/js/lib/xlsjs/xlsx.worker.js");

            worker.onmessage = event => {
              switch (event.data.state) {
                case "ready":
                  break;
                case "error":
                  throw new Error(event.data.details);
                case "finished":
                  var workbook = event.data.workbook;
                  // let sheetName = workbook.SheetNames[0];
                  // workbook.Sheets[sheetName].data.push(...workbook.Sheets[sheetName].data.slice(1));
                  this.workbookWrapper = {workbook: Object.freeze(workbook)}; // @vrosca: disable reactivity on the object, makes things faster
                  this.processing = false;
              }
            }

            worker.postMessage({
              raw:  data,
              type: readAsBinaryStringAvailable? "binary" : "array"
            });

          };

          if (readAsBinaryStringAvailable) {
            reader.readAsBinaryString(f);
          } else {
            reader.readAsArrayBuffer(f);
          }

        }
      },
      reset: function() {
        this.filePicked = false;
        this.fileName = null;
        this.processing = false;
        this.workbookWrapper = null;
      }
    }
  }
</script>

<style scoped>

#multi-excel {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

#multi-excel h1, #multi-excel h2, #multi-excel h3, #multi-excel h4, #multi-excel h5, #multi-excel h6 {
  text-align: center;
}


/* Enter and leave animations can use different */
/* durations and timing functions.              */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(-50%);
  opacity: 0;
}

.file-name {
  position: relative;
}

.change-file {
  position: absolute;
  right: 0;
}
</style>