export class FloorZoneComponent {

urlFloorZoneIn: any;
roomsFloorZoneIn: any;
existingDroppedItemZoneIn: any[] = [];
@Input() urlFloorZone;
@Input() roomsFloorZone;
@Input() currentBoxFloorZone;
@Input() existingDroppedItem: any[] = [];
dropzone1 = [];
currentBox?: string = this.currentBoxFloorZone;
mouse = {
    x: null,
    y: null,
    down: false
  };
will_draw = false;
left;
top;
topLeft = [];

@ViewChild('parentparent') parentparent;

@HostListener('mousedown', ['$event'])
onMousedown(event) {
    this.mouse.down = true;
}

@HostListener('mouseup', ['$event'])
onMouseup(event) {
    this.mouse.down = false;
}

documentMouseMove(e: MouseEvent) {
    // move logic
    if(!this.mouse.down) { return; }

    const container_rect = this.parentparent.nativeElement.getBoundingClientRect();
    this.mouse.x = e.clientX - container_rect.left;
    this.mouse.y = e.clientY - container_rect.top;
    if(!this.will_draw) {
      requestAnimationFrame(this.draw.bind(this));
      this.will_draw = true;
    }

}

draw() {
    this.will_draw = false;
    const { width, height} = this.parentparent.nativeElement.getBoundingClientRect();
    const perc_x = this.mouse.x / width * 100;
    const perc_y = this.mouse.y / height * 100;
    // -5 to center (elem has its width set to 10%)
    console.log('left', (perc_x - 5) + '%');
    this.left = perc_x - 5;
    this.topLeft = []
    this.topLeft.push(this.left);
    // -5 to center (elem has its height set to 10%)
    console.log('top', (perc_y - 5) + '%');
    this.top = perc_y - 5;
    this.topLeft.push(this.top)
}

ngOnChanges(changes: SimpleChanges) {
    if (changes.urlFloorZone && changes.urlFloorZone.currentValue) {
        this.urlFloorZoneIn = changes.urlFloorZone.currentValue;
    }
    if (changes.roomsFloorZone && changes.roomsFloorZone.currentValue) {
        this.roomsFloorZoneIn = changes.roomsFloorZone.currentValue
    }
    if(changes.existingDroppedItem && changes.existingDroppedItem.currentValue){
        this.existingDroppedItemZoneIn = changes.existingDroppedItem.currentValue;
    }
}


move(box: string, toList: string[]): void {
    box = this.currentBoxFloorZone;

    let objTemp:any = {
        pos:[]
      };

    objTemp.dis = this.currentBoxFloorZone;

    for(var i=0; i < this.topLeft.length; i++){
        objTemp.pos.push(this.topLeft[i]);
    }

    this.removeBox(box, this.dropzone1);
    toList.push(objTemp);

}

removeBox(item: string, list) {
        if (list.indexOf(item) !== -1) {
            list.splice(list.indexOf(item), 1);
        }

}

}

<div (mousemove)="documentMouseMove($event)" #parentparent>

  <div class="dropzone"
       (drop)="move(currentBox, dropzone1)">

  <div class="box"
       *ngFor="let existingZone of existingDroppedItemZoneIn">
    {{ existingZone.dis }}
    <span style="display: none">{{existingZone.left}}</span>
    <span style="display: none">{{existingZone.top}}</span>
   </div>

    <div class="box"
         *ngFor="let box of dropzone1"
         (dragStart)="currentBox = box">
    {{ box.dis.dis }}
     <span style="display: none">{{box.pos[1]}}</span>
     <span style="display: none">{{box.pos[0]}}</span>
    </div>

</div>
</div>