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

/**
 * Directive to allow Draggable behavior on items
 *
 * @export
 * @class ContainerDirective
 */
@Directive({
  selector: '[wmDraggable]',
})
export class DraggableDirective implements OnInit {
  /**
   * Default class applied to elements that use this directive
   *
   * @type {boolean}
   * @memberof DraggableDirective
   */
  @HostBinding('class.draggable') draggable = true;

  /**
   * Default class applied to elements that are being dragged
   *
   * @type {boolean}
   * @memberof DraggableDirective
   */
  @HostBinding('class.dragging') dragging = false;

  /**
   * Pair of values representing the target node and desire drop position
   *
   * @type {[any, boolean]}
   * @memberof DraggableDirective
   */
  @Input() public wmDraggable: { source: any; draggable: boolean };

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

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

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

  /**
   * Angular lifecycle hook
   *
   * @memberof DraggableDirective
   */
  ngOnInit(): void {
    this.draggable = this.wmDraggable.draggable;
    this.elementRef.nativeElement.draggable = this.draggable;
  }

  /**
   * Item drag started event handler
   *
   * @param {DragEvent} event
   * @memberof DraggableDirective
   */
  @HostListener('dragstart', ['$event'])
  onDragStart(event: DragEvent): void {
    if (!this.draggable) return;
    event.stopPropagation();
    this.dragging = true;
    this.dragDropService.currentDragging = this;
    const customEvent: any = event;
    customEvent.dragData = this.wmDraggable;
    this.dragStart.emit(customEvent);
  }

  /**
   * Item drag ended event handler
   *
   * @param {DragEvent} event
   * @memberof DraggableDirective
   */
  @HostListener('dragend', ['$event'])
  onDragEnd(event: DragEvent): void {
    if (!this.dragging) return;
    this.dragging = false;
    this.dragDropService.currentDragging = null;
    this.dragEnd.emit(event);
  }

  /**
   * Item drag over event handler, its called a lot of times
   *
   * @param {DragEvent} event
   * @memberof DraggableDirective
   */
  @HostListener('dragover', ['$event'])
  onDragOver(event: DragEvent): void {
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy';
  }
}