import {
  Directive,
  ElementRef,
  EventEmitter,
  HostBinding,
  HostListener,
  Input,
  Output,
} from '@angular/core';
import { DragDropService } from '../services/drag-drop.service';

/**
 * Directive to provide a DropZone for draggable items
 *
 * @export
 * @class DropZoneDirective
 */
@Directive({
  selector: '[wmDropZone]',
})
export class DropZoneDirective {
  /**
   * Default class applied to elements that use this directive
   *
   * @type {boolean}
   * @memberof DropZoneDirective
   */
  @HostBinding('class.dropzone') drop = true;

  /**
   * Default class applied to elements that use this directive
   *
   * @type {boolean}
   * @memberof DropZoneDirective
   */
  @HostBinding('class.dragover') isOver = false;

  /**
   * Pair of values representing the target node and desire drop position
   *
   * @type {[any, string]}
   * @memberof DropZoneDirective
   */
  @Input() public wmDropZone: { target: any; position: string };

  /**
   * Events that get triggered when dragenter event is called
   *
   * @type {EventEmitter<DragEvent>}
   * @memberof DraggableDirective
   */
  @Output() dragEnter = new EventEmitter<DragEvent>();

  /**
   * Events that get triggered when dragleave event is called
   *
   * @type {EventEmitter<DragEvent>}
   * @memberof DraggableDirective
   */
  @Output() dragLeave = new EventEmitter<DragEvent>();

  /**
   * Events that get triggered when drop event is called
   *
   * @type {EventEmitter<DragEvent>}
   * @memberof DraggableDirective
   */
  @Output() dropped = new EventEmitter<DragEvent>();

  /**
   * Creates an instance of DropZoneDirective
   *
   * @param {ElementRef} elementRef
   * @param {DragDropService} dragDropService
   * @memberof DropZoneDirective
   */
  constructor(
    private elementRef: ElementRef,
    private dragDropService: DragDropService
  ) {}

  /**
   * Listener for dragenter event, notifies the dragDropService
   * Item drag enter another element event handler
   *
   * @param {*} event
   * @memberof DropZoneDirective
   */
  @HostListener('dragenter', ['$event'])
  onDragEnter(event: any): void {
    this.isOver = true;
    this.dragEnter.emit(event);
  }

  /**
   * Item drag leave another element event handler
   *
   * @param {any} event
   * @memberof DraggableDirective
   */
  @HostListener('dragleave', ['$event'])
  onDragLeave(event: any): void {
    this.isOver = false;
    this.dragLeave.emit(event);
  }

  /**
   * Item dropped event handler
   *
   * @param {any} event
   * @memberof DraggableDirective
   */
  @HostListener('drop', ['$event'])
  onDrop(event: any): void {
    event.preventDefault();
    this.isOver = false;
    const customEvent: any = event;
    customEvent.dragData = this.dragDropService.currentDragging.wmDraggable;
    customEvent.dropData = this.wmDropZone;
    this.dropped.emit(customEvent);
  }
}