import { Injectable } from "@angular/core";
import { TableColumn } from "../../models";

@Injectable()
export class TableResizeService {
    curCol?: any;
    curColWidth?: any;
    pageX?: any;
    columnBeingResized?: string;
    newColumnWidth?: any;  
    mouseMoveRef: any = null;
    mouseUpRef: any = null;

    constructor() {}

    resizeStart(event: any, handleSide: string, column: string, displayedColumns: TableColumn[]) {
        event.stopPropagation();
        if (handleSide === 'left') {
          this.curCol = (<HTMLElement>event.target)?.parentElement?.previousElementSibling;
          const columnIndex = displayedColumns.findIndex(x => x.prop === column);
          this.columnBeingResized = columnIndex > 0 ? displayedColumns[columnIndex - 1].prop : column;
        } else {
          this.curCol = (<HTMLElement>event.target).parentElement;
          this.columnBeingResized = column;
        }
        this.pageX = event.pageX;
        this.curColWidth = this.curCol.offsetWidth;
        this.mouseMoveRef = this.mouseMoveListener.bind(this);
        this.mouseUpRef = this.mouseUpListener.bind(this);
        document.addEventListener('mousemove', this.mouseMoveRef);
        document.addEventListener('mouseup', this.mouseUpRef);
      }
    
      mouseMoveListener(event: any) {
        if (this.curCol != null) {
          const diffX = event.pageX - this.pageX;
          this.curCol.style.width = `${(this.curColWidth + diffX)}px`;
          this.newColumnWidth = this.curColWidth + diffX;
        }
      }
    
      mouseUpListener(event: any) {
        this.curCol = undefined;
        this.curColWidth = undefined;
        this.pageX = undefined;
        this.columnBeingResized = undefined;
        this.newColumnWidth = undefined;
        document.removeEventListener('mousemove', this.mouseMoveRef);
        document.removeEventListener('mouseup', this.mouseUpRef);
      }   

}