import { Component, Input, Output, EventEmitter, ElementRef, forwardRef, ExistingProvider, OnInit, OnChanges, AfterViewInit } from '@angular/core';
import { InputBase } from './inputBase';
import { RdLib } from '../../base/rdLib';
import { ScriptLoaderService } from '../../library/script-loader.service';

declare const XLSX;
const provider: ExistingProvider = { provide: InputBase, useExisting: forwardRef(() => InputFile) };

export type UploadModes = "instantly" | "useButtons";
export type ReadModes = "readAsText" | "readAsDataURL" | "readAsArrayBuffer" | "readAsBinaryString";

@Component({
  selector: 'rd-input-file',
  template: `    
    <div id="dxElement" [ngStyle]="{'border': dropMode ? '3px dashed #ddd' : 'none'}" *ngIf="!readMode"></div>
    <label style="border: 1px solid #ccc;display:inline-block;padding:6px 12px;cursor: pointer" *ngIf="readMode">
      <i class="fas fa-cloud-upload-alt"></i>
      <input type="file" onchange="fileReader(event)" [accept]="acceptType" style="display:none">
    </label> 
  `,
  providers: [provider]
})
export class InputFile extends InputBase implements OnInit, OnChanges, AfterViewInit {
  constructor(private element: ElementRef, private script: ScriptLoaderService) {
    super();
    (<any>window).fileReader = this.fileReader.bind(this);
  }

  @Input("rd-model") model;
  @Output("rd-modelChange") modelChange: EventEmitter<string> = new EventEmitter<string>();
  @Output("rd-onUpload") changeEvent: EventEmitter<string> = new EventEmitter<string>();
  @Output("rd-onResponse") onResponse: EventEmitter<object> = new EventEmitter<object>();
  @Output("rd-onRead") onReadEvent: EventEmitter<any> = new EventEmitter<any>();

  @Input("rd-disabled") disabled: boolean;
  @Input("rd-config") config = '/aril-webserver/api/upload';
  @Input("rd-accept-type") acceptType: string = '*';
  @Input("rd-multiple") multiple: boolean = false;
  @Input("rd-uploadMode") uploadMode: UploadModes = "instantly";
  @Input("rd-dropMode") dropMode: boolean = false;
  @Input("rd-chunkSize") chunkSize = 0;
  @Input("rd-readMode") readMode: ReadModes;

  ngOnInit() {
    if (this.acceptType == ".xls,.xlsx" && this.readMode == "readAsBinaryString") this.loadXLSXScript();
  }

  ngOnChanges(changes) {
    if (!this.dxElement) return;
    if (changes.disabled) this.dxElement.option('disabled', this.disabled);
    if (this.acceptType == ".xls,.xlsx" && this.readMode == "readAsBinaryString") this.loadXLSXScript(); // changeable readMode (for inputs.html)
  }

  ngAfterViewInit() {
    if (!this.readMode) {
      this.container = this.jQuery(this.element.nativeElement).find("#dxElement");
      this.container.dxFileUploader({
        name: "uploadFile",
        accept: this.acceptType,
        multiple: this.multiple,
        disabled: this.disabled,
        value: [],
        uploadUrl: this.config,
        selectButtonText: this.dropMode ? RdLib.localization.translateEn("Select File") : '',
        labelText: this.dropMode ? RdLib.localization.translateEn("or Drop here") : '',
        uploadMode: this.uploadMode,
        chunkSize: this.chunkSize,
        onUploaded: (e) => {
          this.onResponse.emit(e);
          this.onChange(JSON.parse(e.request.response));
        }
      })
      this.dxElement = this.container.dxFileUploader('instance');
    }
    if (this.dropMode) {
      this.jQuery(this.element.nativeElement).find(".dx-fileuploader-button").css({ "background": "none", "width": "auto", "height": "auto" });
    }
  }

  fileReader(event) {
    let reader = new FileReader();

    switch (this.readMode) {
      case "readAsText": reader.readAsText(event.target.files[0]); break;
      case "readAsDataURL": reader.readAsDataURL(event.target.files[0]); break;
      case "readAsArrayBuffer": reader.readAsArrayBuffer(event.target.files[0]); break;
      case "readAsBinaryString": reader.readAsBinaryString(event.target.files[0]); break;
    }

    reader.onload = function (e) {
      if (this.acceptType == ".xls,.xlsx" && this.readMode == "readAsBinaryString") {
        let workbook = XLSX.read(e.target.result, { type: 'binary' });
        workbook.SheetNames.forEach(function (sheetName) {
          let xlsRow = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
          let xlsJson = JSON.stringify(xlsRow);
          this.onReadEvent.emit(xlsJson);
        }.bind(this))
      }
      else this.onReadEvent.emit(reader.result);
    }.bind(this);

    reader.onerror = function () { console.log("File Reader Error: ", reader.error) };
  }

  loadXLSXScript() {
    this.script.load(["./assets/js/jszip.js", "./assets/js/xlsx.min.js"]);
  }
}