import {
  Injectable,
  Component,
  OnInit,
  ViewChild,
  Inject
} from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { DriveRepresentation } from '../dtos/DriveRepresentation';
import { IcsDriveService } from '../ics-drive.service';

@Component({
  selector: 'lib-app-upload-modal',
  templateUrl: './upload-modal.component.html',
  styleUrls: ['./upload-modal.component.scss'],
  providers: [IcsDriveService]
})
@Injectable()
export class UploadModalComponent implements OnInit {
  selectedFile: File;
  public responseData: Array<DriveRepresentation>;
  public driveData: any = [];
  public showData: boolean;
  public folderId:number;
  driveRepresentation: DriveRepresentation;
  @ViewChild('file')
  file;
  public files: Set<File> = new Set();
  buttonDisabled = false;
  progress;
  canBeClosed = false;
  primaryButtonText = 'Upload';
  showCancelButton = true;
  uploading = false;
  uploadSuccessful = false;
  resultData = '';
  showFinish = false;
  showMultiple = false;
  showCloseButton = false;
  loader = false;
  driveHideButton = false;
  imgBaseUrl =
    'https://s3-us-west-2.amazonaws.com/repository-leadics-test/leap/leap_icons/uploadRepo/';
  constructor(
    public dialogRef: MatDialogRef<UploadModalComponent>,
    public uploadService: IcsDriveService,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    
  }

  ngOnInit() {
    this.showData = false;
    this.showMultiple = this.data.dataKey;
    this.connectDrive();
  }
  addFiles() {
    this.file.nativeElement.click();
  }

  onFilesAdded() {
    const files: { [key: string]: File } = this.file.nativeElement.files;
    for (let key in files) {
      if (!isNaN(parseInt(key))) {
        this.files.add(files[key]);
      }
    }
    this.canBeClosed = true;
  }

  closeDialog() {
    let allProgressObservables = [];

    if (this.uploadSuccessful) {
      return this.dialogRef.close(this.responseData['resp']);
    } else {
      this.progress = this.uploadService.upload(this.files,this.folderId);
      let newResult: any;
      newResult = this.progress;
      this.uploadSuccessful = true;
     
    }
    this.responseData = this.progress;
    for (let key in this.progress) {
      if(this.progress[key].progress!==undefined)
      allProgressObservables.push(this.progress[key].progress.toPromise());
    }
    
    this.dialogRef.disableClose = true;
    this.showCancelButton = false;

    this.primaryButtonText = 'Finish';
    this.canBeClosed = false;
     Promise.all(allProgressObservables).then(end => {
       this.canBeClosed = true;
       this.dialogRef.disableClose = false;
       this.uploadSuccessful = true;
       this.uploading = false;
       this.showCloseButton = true;
     });

  
  
  }

  onSelect(value) {
    let status: any = [];
    let arrayResp = new Array();
    const resultData: any = value;
    this.driveRepresentation = new DriveRepresentation();
    this.driveRepresentation.id = resultData.id;
    this.driveRepresentation.name = resultData.name;
    arrayResp.push(this.driveRepresentation);
    status['resp'] = arrayResp;
    this.responseData = status;
    this.uploadSuccessful = true;
    this.closeDialog();
  }

  connectDrive() {
    this.loader = true;
    this.driveHideButton = true;

    this.uploadService.getDrive().subscribe(
      response => {
        this.driveData = response[0]['files'];
        this.loader = false;
        this.showData = true;
        this.folderId= response[0]['id'];
      },
      error => {}
    );
  }

  getFileExt(args) {
    let file = '';
    const lastCHar = args.substr(-4);
    if (lastCHar === '.png' || lastCHar === '.jpg' || lastCHar === 'jepg') {
      file = 'image_icon.svg';
    } else {
      file = 'file_icon.svg';
    }
    return file;
  }

  drop(ev) {
    ev.preventDefault();
    let files = ev.dataTransfer.files;
    if (files.length > 0) {
      for (let key in files) {
        if (!isNaN(parseInt(key, 10))) {
          this.files.add(files[key]);
        }
      }
    }
  }

  allowDrop(ev) {
    ev.preventDefault();
  }
}