import {
  Component,
  OnInit,
  Input,
  ElementRef,
  AfterViewInit
} from '@angular/core';

import { NGXLogger } from 'ngx-logger';
import { FileUploadItem } from '@ucap-webmessenger/api';

@Component({
  selector: 'ucap-file-upload-queue',
  templateUrl: './file-upload-queue.component.html',
  styleUrls: ['./file-upload-queue.component.scss']
})
export class FileUploadQueueComponent implements OnInit, AfterViewInit {
  @Input()
  dropZoneIncludeParent = false;

  fileUploadItems: FileUploadItem[];
  uploadItems: DataTransferItem[];

  constructor(
    private elementRef: ElementRef<HTMLElement>,
    private logger: NGXLogger
  ) {}

  ngOnInit() {}

  ngAfterViewInit(): void {
    this.changeStyleDisplay(false);
  }

  onDragEnter(items: DataTransferItemList): void {
    if (!items || 0 === items.length) {
      return;
    }

    const uploadItems: DataTransferItem[] = [];
    // tslint:disable-next-line: prefer-for-of
    for (let i = 0; i < items.length; i++) {
      uploadItems.push(items[i]);
    }
    this.uploadItems = [...uploadItems];
    this.changeStyleDisplay(true);
  }

  onDragLeave(): void {
    this.changeStyleDisplay(false);
  }

  onDrop(fileUploadItems: FileUploadItem[]) {
    if (!fileUploadItems || 0 === fileUploadItems.length) {
      return;
    }
    this.fileUploadItems = fileUploadItems;
    this.uploadItems = undefined;
  }

  onFileSelected(fileUploadItems: FileUploadItem[]): void {
    if (!fileUploadItems || 0 === fileUploadItems.length) {
      return;
    }
    this.fileUploadItems = fileUploadItems;
    this.uploadItems = undefined;
    this.changeStyleDisplay(true);
  }

  onUploadComplete(): void {
    setTimeout(() => {
      this.fileUploadItems = undefined;
      this.changeStyleDisplay(false);
    }, 1000);
  }

  isEventInElement(event: DragEvent): boolean {
    const rect = this.elementRef.nativeElement.getBoundingClientRect();
    // const rect: DOMRect = this.elementRef.nativeElement.getBoundingClientRect();

    if (
      event.pageX >= rect.left &&
      event.pageX <= rect.left + rect.width &&
      event.pageY >= rect.top &&
      event.pageY <= rect.top + rect.height
    ) {
      return true;
    }
    return false;
  }

  private changeStyleDisplay(show: boolean): void {
    if (show || (!!this.fileUploadItems && 0 < this.fileUploadItems.length)) {
      if (this.dropZoneIncludeParent) {
        this.elementRef.nativeElement.parentElement.style.display = '';
      } else {
        this.elementRef.nativeElement.style.display = '';
      }
    } else {
      if (this.dropZoneIncludeParent) {
        this.elementRef.nativeElement.parentElement.style.display = 'none';
      } else {
        this.elementRef.nativeElement.style.display = 'none';
      }
    }
  }

  // onClickClear(fileUploadItem: FileUploadItem) {
  //   this.fileUploadItems = this.fileUploadItems.filter(f => {
  //     return (
  //       f.file.name !== fileUploadItem.file.name &&
  //       f.file.path !== fileUploadItem.file.path
  //     );
  //   });
  //   this.filesChange.emit(this.fileUploadItems);
  // }
}