import {Component, NgZone, Input, OnInit, ViewChild, ElementRef, EventEmitter, Output} from '@angular/core';
import {NgUploaderOptions} from 'ngx-uploader';
import {environment} from '../../../../../environments/environment';
import {FileUploadDTO} from '../../../core';

@Component({
  selector: 'ps-file-uploader',
  templateUrl: './ps-file-uploader.component.html',
  styleUrls: ['./ps-file-uploader.component.less']
})

export class FileUploaderComponent implements OnInit {

  @Input() data: any;
  @Input() uploadUrl: string;
  @Input() showProgressBar: boolean = false;
  @Input() showDragAndDropContainer: boolean = false;
  @Input() showUploadButton: boolean = false;
  @Input() uploadButtonLabel: string = 'Browse';
  @Input() expiresAfter: number = 2;

  @Output() uploadStarted: EventEmitter<any> = new EventEmitter();
  @Output() success: EventEmitter<any> = new EventEmitter<any>();

  @ViewChild('uploadInput') uploadInput: ElementRef;

  // events: EventEmitter<string> = new EventEmitter<string>();
  options: NgUploaderOptions;
  response: any;
  hasBaseDropZoneOver: boolean;
  progress: number = 0;

  responseEmited: boolean = false;

  constructor(private zone: NgZone) {
  }

  public startUpload() {
    this.responseEmited = false;
    this.uploadInput.nativeElement.click();
    // this.events.emit('startUpload');
  }

  handleUpload(data: any) {
    this.progress = 0;
    setTimeout(() => {
      this.zone.run(() => {
        this.progress = parseInt(data.progress.percent, 0);
        if (data && data.response && !this.responseEmited) {
          this.responseEmited = true; // HACK! data is returned twice for some reason
          this.response = JSON.parse(data.response);
          this.success.emit(this.response);
        }
      });
    });
  }

  fileOverBase(e: boolean) {
    this.hasBaseDropZoneOver = e;
  }

  ngOnInit() {
    if (!this.uploadUrl || !this.uploadUrl.length) {
      throw new Error('Upload url is required');
    } else {
      this.options = new NgUploaderOptions({
        url: this.buildEndpointUrl(),
        autoUpload: true,
        withCredentials: true,
        data: this.data
      });
    }
  }

  buildEndpointUrl() {
    return this.uploadUrl + '?expirationHours=' + this.expiresAfter;
  }

}