import { CdkDragDrop, DragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { ColorSumItem } from 'src/app/lib/filler/common/interfaces';
import Utils from 'src/app/lib/filler/common/utils';

@Component({
  selector: 'app-test',
  template: `

      <!--
  <ng-container *ngIf="colorSum">
    <div cdkDropList [cdkDropListData]="colorSum" (cdkDropListDropped)="onDrop($event)">
      <art-color-box *ngFor="let item of colorSum" [data]="item" cdkDrag> </art-color-box>
      <div class="box" *ngFor="let item of colorSum" [style.background-color]="item.cssColor" cdkDrag>
        {{item.total}}
      </div>
    </div>
  </ng-container>
      -->


  <ng-container *ngIf="colorSum">
    <div ngSortable (onEnd)="onEnd($event)">
      <art-color-box *ngFor="let item of colorSum" [data]="item"  [showTrash]="false"> </art-color-box>
      <!--
      <div class="box" *ngFor="let item of colorSum" [style.background-color]="item.cssColor" >
        {{item.total}}
      </div>
-->
    </div>
  </ng-container>

    
  `,
  styles: [
    `
    .box{
      width:100px;
      height:100px;
      border:1px solid gray;
      display:inline-block;
    }
    

    .cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
              0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12);
  }

  .sortable-ghost,
  .cdk-drag-placeholder {
    opacity: 0;
  }


    `
  ]

})
export class TestComponent implements OnInit {

  image: HTMLImageElement;
  color: string = 'gray';
  colorSum: ColorSumItem[];

  constructor(
    private http: HttpClient,
  ) {
    Utils.loadImage('/napi/web/art/624612f5cddcb498ca3a3749/bin/rawColored')
      .then(img => {
        this.image = img as HTMLImageElement;
      })

    this.http.get(`/napi/web/art/624d4fb49856860fee6a8a6b/bin/colorSum`).subscribe(resp => {
      this.colorSum = resp as ColorSumItem[];
    })
  }

  ngOnInit(): void {

  }

  onEnd(evt : any) {

    var itemEl = evt.item;  // dragged HTMLElement
    console.log(
		evt.to,    // target list
		evt.from,  // previous list
		evt.oldIndex,  // element's old index within old parent
		evt.newIndex,  // element's new index within new parent
		evt.oldDraggableIndex, // element's old index within old parent, only counting draggable elements
		evt.newDraggableIndex, // element's new index within new parent, only counting draggable elements
		evt.clone, // the clone element
		evt.pullMode,  // when item is in another sortable: `"clone"` if cloning, `true` if moving
    );
  }

  onDrop(event: CdkDragDrop<any>) {
    console.log(event.currentIndex, event.previousIndex, event.container.data);
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
  }

}
