import { Component, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';

import {
  MessageBusService,
  StoreService,
  DialogService,
  UploadService,
  AnalyticsService,
  AnalyticsEvent
} from '@arrow/bom/core';
import { TranslateService } from '@ngx-translate/core';
import { LoggerService } from '@arrow/bom/logger';

@Component({
  selector: 'app-upload',
  templateUrl: 'bom-upload.component.html',
  styleUrls: ['bom-upload.component.scss']
})
export class BomUploadComponent {
  showDropMessage = false;
  @ViewChild('fileUploadFocusArea') fileUploadFocusAreaElement: ElementRef;
  @Output() bomUploaded: EventEmitter<boolean> = new EventEmitter();

  constructor(
    private uploadService: UploadService,
    private messageBusService: MessageBusService,
    private dialogService: DialogService,
    private storeService: StoreService,
    private loggerService: LoggerService,
    private analyticsService: AnalyticsService,
    private translateService: TranslateService
  ) {}

  /**
   * When a user uploads a files via the dialog box this event is triggered
   * and sends file to be uploaded.
   * @param event  Event from the dialog file select window.
   */
  onChange(event: any): void {
    this.messageBusService.to('ch:loader', { payload: true });
    this.uploadFiles(event.target.files[0]);
  }

  /**
   * Uploads files via upload service.
   * Proceeds to data processing etc. on successful response (200), otherwise error is handled
   * @param file  User selected file.
   */
  uploadFiles(file: any): void {
    this.uploadService.uploadFile(file).subscribe(
      (data: any) => {
        if (data.status) {
          if (data.status.statusCode === 200) {
            this.storeService.data = data.payload;
            this.bomUploaded.emit(true);
          } else {
            this.handleUploadError(data.error.message, data.error.customCode, data.error.errorContent.rowCount);
          }
        }
      },
      error => this.handleUploadError(error.error.message, error.error.customCode, error.error.errorContent.rowCount)
    );
  }

  /**
   * Shows drop message when user drags a file over the window.
   * @param event  Drag event from file dragging.
   */
  onDragEnter(event: DragEvent): void {
    event.stopPropagation();
    event.preventDefault();
    this.showDropMessage = true;
  }

  /**
   * Shows drop message when user drags a file over the window.
   * @param event  Drag event from file dragging.
   */
  onDragOver(event: DragEvent): void {
    event.stopPropagation();
    event.preventDefault();
    this.showDropMessage = true;
  }

  /**
   * Hides drop message when user drags a file out of the window
   * @param event  Drag event from file dragging.
   */
  onDragLeave(event: DragEvent): void {
    event.stopPropagation();
    event.preventDefault();
    this.showDropMessage = false;
  }

  /**
   * Selects file user drops on to the window and parses to get uploaded.
   * @param event  Drop event from file dropping.
   */
  onDrop(event: any): void {
    event.stopPropagation();
    event.preventDefault();
    this.showDropMessage = false;
    this.messageBusService.to('ch:loader', { payload: true });
    this.uploadFiles(event.dataTransfer.files[0]);
  }

  setFileUploadIconFocus() {
      this.fileUploadFocusAreaElement.nativeElement.classList.add('bom-element-focused');
  }

  unsetFileUploadIconFocus() {
      this.fileUploadFocusAreaElement.nativeElement.classList.remove('bom-element-focused');
  }

  /**
   * Stops the loader and displays a modal with an error message
   */
   handleUploadError(errorMessage: string, errorStatusCode: any, numberOfLines: any): void {
    if (errorStatusCode === 24002) {
      this.analyticsService.googleTrackEvent(AnalyticsEvent.CLICK, {
        category: 'BOM',
        action: ' Limit exceeded Home',
        label: numberOfLines,
        value: numberOfLines,
      });
    }
    this.loggerService.warn(errorMessage);
    this.messageBusService.to('ch:loader', { payload: false });
    this.dialogService.alert(this.translateService.instant('Upload-Error'), errorMessage);
  }
}