import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { FileUpload } from 'src/app/Interface/FileInterface';
import { FileUploadService } from 'src/app/services/fileUploadService/file-upload.service';

@Component({
  selector: 'app-edit-dp',
  templateUrl: './edit-dp.component.html',
  styleUrls: ['./edit-dp.component.css']
})
export class EditDpComponent implements OnInit {

  @ViewChild("closeBtn", { static: false }) public closeBtn: ElementRef;

  @Input('uid') uid: string;
  @Input('email') email: string;
  @Input('displayName') displayName: string;

  choosePhoto: boolean = true
  enableLoader: boolean = false
  showClose: boolean = false
  enableCropper: boolean = false

  selectedFile: FileList
  imageUrl: string = ""

  percentage: number = 0
  basePath: string;
  private currentFileUpload: FileUpload;
  public fileName: string

  @Output() editOrgLogoCompleted = new EventEmitter<{ completed: boolean }>();

  constructor(public uploadService: FileUploadService) { }

  ngOnInit(): void {
    this.imageUrl = ""
    this.choosePhoto = true;
    this.enableCropper = false;

    this.basePath = '/Organisation/' + this.uid + '/Logo';
  }

  detectImage(imageUpload) {
    this.selectedFile = imageUpload.target.files;
    const file = this.selectedFile.item(0);

    var reader = new FileReader();
    reader.onload = (event: any) => {
      this.imageUrl = event.target.result;

      this.choosePhoto = false;
      this.enableCropper = true;
    }
    reader.readAsDataURL(file)

  }

  cancel() {
    this.imageUrl = ""
    this.choosePhoto = true;
    this.enableCropper = false;
  }

  cropPhotoCompleted(data: { completed: boolean }) {
    this.enableCropper = false;
    
    const file = this.selectedFile.item(0);
    
    this.currentFileUpload = new FileUpload(file);
    this.fileName = this.currentFileUpload.file.name;

    this.uploadService.pushFileToTaskStorage(this.currentFileUpload, this.basePath, "Logo")
    .subscribe(percentage => {
      this.percentage = Math.round(percentage);
    },
    error => {
      console.log(error);
    }
    );

    this.editOrgLogoDone();
  }

  editOrgLogoDone() {
    this.showClose = true;
    this.editOrgLogoCompleted.emit({ completed: true });
  }

  closeModal() {
    this.choosePhoto = true;
    this.showClose = false;
    this.closeBtn.nativeElement.click();
  }

}