@Component({
  selector: 'app-version-1',
  template: `
    <h1>{{title}}</h1>
    <table>
      <tbody>
        <tr *ngFor="let row of table">
          <td *ngFor="let cell of row">
            <div
              class="cell-content"
              dnd-droppable
              (onDropSuccess)="drop($event, cell)"
              (onDragEnter)="dragEnter($event, cell)"
              (onDragLeave)="dragLeave($event, cell)"
            >
              <span
                class="item"
                *ngFor="let item of cell"
                dnd-draggable
                [dragData]="{cell: cell, item: item}"
              >{{item}}</span>
              <span class="entered" *ngIf="cell.entered">{{cell.entered}}</span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  `,
})
export class Version1Component extends VersionBase {
  public static readonly title = 'Наивная реализация';

  // Курсор с данными был наведен на ячейку
  public dragEnter({ dragData }, cell: Cell) {
    cell.entered = dragData.item;
  }

  // Курсор с данными покинул ячейку
  public dragLeave({ dragData }, cell: Cell) {
    delete cell.entered;
  }

  // В ячейку положили данные
  public drop({ dragData }, cell: Cell) {
    const index = dragData.cell.indexOf(dragData.item);
    dragData.cell.splice(index, 1);
    cell.push(dragData.item);
    delete cell.entered;
  }
}

@Component({
  selector: 'app-version-2',
  template: `
    <h1>{{title}}</h1>
    <table>
      <tbody
        dnd-droppable
        (onDropSuccess)="drop($event)"
        (onDragEnter)="dragEnter($event)"
        (onDragLeave)="dragLeave($event)"
      >
        <tr *ngFor="let row of table">
          <td *ngFor="let cell of row">
            <div class="cell-content">
              <span
                class="item"
                *ngFor="let item of cell"
                dnd-draggable
                [dragData]="{cell: cell, item: item}"
                (onDragEnd)="dragEnd($event)"
              >{{item}}</span>
              <span class="entered" *ngIf="cell.entered">{{cell.entered}}</span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  `,
})
export class Version2Component extends VersionBase {
  public static readonly title = 'Один droppable элемент';

  // Ячейка над которой находится курсор с данными
  private enteredCell: Cell;

  // Поиск элемента на котором сработало событие
  private getTargetElement(target: EventTarget): Element {
    return (target instanceof Element) ? target
      : (target instanceof Text) ? target.parentElement
      : null;
  }

  // Поиск данных ячейки по элементу
  private getCell(element: Element): Cell {
    if (!element) { return null; }
    const td = element.closest('td');
    const tr = element.closest('tr');
    const body = element.closest('tbody');
    const row = body ? Array.from(body.children).indexOf(tr) : -1;
    const col = tr ? Array.from(tr.children).indexOf(td) : -1;
    return (row >= 0 && col >= 0) ? this.table[row][col] : null;
  }

  // Сброс состояния активной ячейки
  private clearEnteredCell() {
    if (this.enteredCell) {
      delete this.enteredCell.entered;
      delete this.enteredCell;
    }
  }

  // Курсор с данными был наведен на элемент таблицы
  public dragEnter({ dragData, mouseEvent }: { dragData: any, mouseEvent: DragEvent }) {
    this.clearEnteredCell();
    const element = this.getTargetElement(mouseEvent.target);
    const cell = this.getCell(element);
    if (cell) {
      cell.entered = dragData.item;
      this.enteredCell = cell;
    }
  }

  // Курсор с данными покинул элемент таблицы
  public dragLeave({ dragData, mouseEvent }: { dragData: any, mouseEvent: DragEvent }) {
    const element = this.getTargetElement(mouseEvent.target)
    if (!element || !element.closest('td')) {
      this.clearEnteredCell();
    }
  }

  // На элемент таблицы положили данные
  public drop({ dragData, mouseEvent }: { dragData: any, mouseEvent: DragEvent }) {
    if (this.enteredCell) {
      const index = dragData.cell.indexOf(dragData.item);
      dragData.cell.splice(index, 1);
      this.enteredCell.push(dragData.item);
    }
    this.clearEnteredCell();
  }

  // Перетаскивание завершено
  public dragEnd() {
    this.clearEnteredCell();
  }
}

@Component({
  selector: 'app-version-3',
  template: `
    <h1>{{title}}</h1>
    <table>
      <tbody
        (dragenter)="dragEnter($event)"
        (dragleave)="dragLeave($event)"
        (dragover)="dragOver($event)"
        (drop)="drop($event)"
      >
        <tr *ngFor="let row of table">
          <td *ngFor="let cell of row">
            <div class="cell-content">
              <span
                class="item"
                *ngFor="let item of cell"
                draggable="true"
                (dragstart)="dragStart($event, {cell: cell, item: item})"
                (dragend)="dragEnd()"
              >{{item}}</span>
              <span class="entered" *ngIf="cell.entered">{{cell.entered}}</span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  `,
})
export class Version3Component extends VersionBase {
  public static readonly title = 'Нативные события';

  // Ячейка над которой находится курсор с данными
  private enteredCell: Cell;
  // Перетаскиваемые данные
  private dragData: { cell: Cell, item: string };

  // Поиск элемента, над которым сработало событие
  private getTargetElement(target: EventTarget): Element {
    return (target instanceof Element) ? target
      : (target instanceof Text) ? target.parentElement
      : null;
  }

  // Поиск данных ячейки по элементу
  private getCell(element: Element): Cell {
    if (!element) { return null; }
    const td = element.closest('td');
    const tr = element.closest('tr');
    const body = element.closest('tbody');
    const row = body ? Array.from(body.children).indexOf(tr) : -1;
    const col = tr ? Array.from(tr.children).indexOf(td) : -1;
    return (row >= 0 && col >= 0) ? this.table[row][col] : null;
  }

  // Сброс состояния активной ячейки
  private clearEnteredCell() {
    if (this.enteredCell) {
      delete this.enteredCell.entered;
      delete this.enteredCell;
    }
  }

  // Начало перетаскивания
  public dragStart(event: DragEvent, dragData) {
    this.dragData = dragData;
    event.dataTransfer.effectAllowed = 'all';
    event.dataTransfer.setData('Text', dragData.item);
  }

  // Курсор с данными был наведен на элемент таблицы
  public dragEnter(event: DragEvent) {
    this.clearEnteredCell();
    const element = this.getTargetElement(event.target);
    const cell = this.getCell(element);
    if (cell) {
      this.enteredCell = cell;
      this.enteredCell.entered = this.dragData.item;
    }
  }

  // Курсор с данными покинул элемент таблицы
  public dragLeave(event: DragEvent) {
    const element = this.getTargetElement(event.target);
    if (!element || !element.closest('td')) {
      this.clearEnteredCell();
    }
  }

  // Курсор с данными находится над элементом таблицы
  public dragOver(event: DragEvent) {
    const element = this.getTargetElement(event.target);
    const cell = this.getCell(element);
    if (cell) {
      event.preventDefault();
      event.dataTransfer.dropEffect = 'move';
      return false;
    }
  }

  // На элемент таблицы положили данные
  public drop(event: DragEvent) {
    const element = this.getTargetElement(event.target);
    event.stopPropagation();
    if (this.dragData && this.enteredCell) {
      const index = this.dragData.cell.indexOf(this.dragData.item);
      this.dragData.cell.splice(index, 1);
      this.enteredCell.push(this.dragData.item);
    }
    this.dragEnd();
    return false;
  }

  // Перетаскивание завершено
  public dragEnd() {
    delete this.dragData;
    this.clearEnteredCell();
  }
}

@Component({
  selector: 'app-version-4-cell',
  template: `
    <span
      class="item"
      *ngFor="let item of cell"
      draggable="true"
      (dragstart)="dragStart($event, item)"
      (dragend)="dragEnd($event)"
    >{{item}}</span>
    <span class="entered" *ngIf="cell.entered">{{cell.entered}}</span>
  `,
})
export class Version4CellComponent {

  @Input() public cell: Cell;

  private enteredElements: any = [];

  constructor(
    private element: ElementRef,
    private dndStorage: DndStorageService,
  ) {}

  // Начало перетаскивания
  public dragStart(event: DragEvent, item: string) {
    this.dndStorage.set(this.cell, item);
    event.dataTransfer.effectAllowed = 'all';
    event.dataTransfer.setData('Text', item);
  }

  // Курсор с данными был наведен на элемент таблицы
  @HostListener('dragenter', ['$event'])
  private dragEnter(event: DragEvent) {
    this.enteredElements.push(event.target);
    if (this.cell !== this.dndStorage.cell) {
      this.cell.entered = this.dndStorage.item;
    }
  }

  // Курсор с данными покинул элемент таблицы
  @HostListener('dragleave', ['$event'])
  private dragLeave(event: DragEvent) {
    this.enteredElements = this.enteredElements.filter(x => x != event.target);
    if (!this.enteredElements.length) {
      delete this.cell.entered;
    }
  }

  // Курсор с данными находится над элементом таблицы
  @HostListener('dragover', ['$event'])
  private dragOver(event: DragEvent) {
    event.preventDefault();
    event.dataTransfer.dropEffect = this.cell.entered ? 'move' : 'none';
    return false;
  }

  // На элемент таблицы положили данные
  @HostListener('drop', ['$event'])
  private drop(event: DragEvent) {
    event.stopPropagation();
    this.cell.push(this.dndStorage.item);
    this.dndStorage.dropped();
    delete this.cell.entered;
    return false;
  }

  // Перетаскивание завершено
  public dragEnd(event: DragEvent) {
    if (this.dndStorage.isDropped) {
      const index = this.cell.indexOf(this.dndStorage.item);
      this.cell.splice(index, 1);
    }
    this.dndStorage.reset();
  }
}

@Component({
  selector: 'app-version-4',
  template: `
    <h1>{{title}}</h1>
    <table>
      <tbody>
        <tr *ngFor="let row of table">
          <td *ngFor="let cell of row">
            <app-version-4-cell class="cell-content" [cell]="cell"></app-version-4-cell>
          </td>
        </tr>
      </tbody>
    </table>
  `,
})
export class Version4Component extends VersionBase {
  public static readonly title = 'Декомпозированные ячейки';
}