import {type Options } from "./type"
import Delete from './delete'
import { nextTick } from "vue"

export default class extends Delete {
    constructor(options: Options){
        super(options)
    }

    private colIndex: number = -1
    private startX: number = -1
    private startWidth: number = 0
    private minWidth: number = 0

    private _doResize: any = null;
    private doResize () {
        if (this.colIndex !== -1) {
          const deltaX = event.clientX - this.startX;
          let newWidth = this.startWidth + deltaX;

          if (newWidth < this.minWidth) newWidth = this.minWidth

          this.tileColumns.value[this.colIndex].width = newWidth;
        }
    }
    private _stopResize: any = null;
    private stopResize() {
        this.colIndex = -1;
        document.removeEventListener('mousemove', this._doResize);
        document.removeEventListener('mouseup', this._stopResize);
    }
    startResize (index: number, rowindex: number) {
        this.colIndex = index;
        this.startX = event?.clientX;

        const currentColumn = this.getCellElement({colindex: this.colIndex, rowindex });
        if(!currentColumn) return;
        
        this.startWidth = parseInt(getComputedStyle(currentColumn).width)
        this.minWidth = parseInt(this.tileColumns.value[index]?.minWidth ?? 50);

        this._doResize = () => this.doResize()
        this._stopResize = () => this.stopResize()
        document.addEventListener('mousemove', this._doResize)
        document.addEventListener('mouseup', this._stopResize)
    }

    getThWidth (colIndex: number) {
        const th = this.tileColumns?.value[colIndex]
        return typeof th?.width === 'number' ? th?.width + 'px' : th?.width
    }

    getThMinWidth (colIndex: number) {
        const th = this.tileColumns?.value[colIndex]
        return typeof th?.minWidth === 'number' ? th?.minWidth + 'px' : th?.minWidth
    }

}