import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { AlertController } from '@ionic/angular';


export interface CustomWindow extends Window {
  File: any;
  FileReader: any;
}
declare let window: CustomWindow;

@Component({
  selector: 'file-uploader',
  templateUrl: './file-uploader.component.html',
  styleUrls: ['./file-uploader.component.scss']
})
export class FileUploaderComponent implements OnInit {
  @Input() multiupload = false;
  @Input() attachmentname = 'attachment-loader';
  public attachmentData: string;
  @Input() maxFileSize = 10 * 1024 * 1024;
  @Output() fileSelected = new EventEmitter();
  public inputFiles: any = [];
  public attachmentImg = 'assets/icon/attachment.png';
  public deleteImg = 'assets/icon/delete.png';
  constructor(
    public cs: CommonService,
    public ts: TranslatorService,
    public alertController: AlertController
  ) {
  }

  ngOnInit() {
  }


  public loadAttachment(changeEvent) {
    const fileInput = this.getFileElement();
    if (this.isFileSupported()) {
      if (fileInput.files != null && fileInput.files.length > 0) {
        const file = fileInput.files[0];
        const reader = new FileReader();
        if (file.size <= this.maxFileSize) {
          reader.onload = (data) => {
            if (this.multiupload) {
              this.inputFiles.push({name: file.name, data: data.target['result']});
              } else {
                this.inputFiles = [{name: file.name, data: data.target['result']}];
              }
            this.fileSelected.emit( {
              name: file.name ,
              data: data.target['result'],
              inputFiles: this.inputFiles
            });
          };
          reader.readAsDataURL(file);
        } else {
          this.attachmentData = null;
          changeEvent.target.value = ''; //  remove current selection
          this.showFileExceededMaxSize();
        }
      } else {
        this.attachmentData = null;
      }
    }
  }

  private isFileSupported() {
    return (window.FileReader && window.File);
  }

  private showFileExceededMaxSize() {
    this.cs.presentConfirmDialog(
      this.ts.trPK('general', 'large-file'),
      () => {
        this.openFile();
      },
      () => {
      }
    );
  }

  private getFileElement(): HTMLInputElement {
    return document.getElementById(this.attachmentname) as HTMLInputElement;
  }

  public openFile() {
    const fileInput = this.getFileElement();
    fileInput.click();
  }
  public deleteFiles(index: number) {
    this.inputFiles.splice(index, 1);
    this.fileSelected.emit( {
      name: null,
      data: '',
      inputFiles: this.inputFiles
    });
  }
}
