import { Cell } from "./cells";
import { Grid } from "./grid";
import { EventCollection, KeyCollection } from "./common";

export class EditBox{
    private _cetxt:HTMLElement|null;
    constructor(){
        this._cetxt = null;
    }
    public createEditText(cell:Cell, grid:Grid){
        cell.setDivVisible(false);
        cell.isEditBoxCreated = true;
        //creating
        this._cetxt = document.createElement("INPUT");
        this._cetxt.setAttribute("type", "text");
        //if typeof Cell => 나중에 많아지면 추가
        this._cetxt.style.width = cell.width;
        this._cetxt.style.padding = "0px";
        this._cetxt.style.border = "0px";
        if(cell.domElement) cell.domElement.appendChild(this._cetxt);
        this._inputTextListen(grid, cell);
    }
    public get editText():HTMLElement|null{
        return this._cetxt;// editor
    }
    public removeEditText(target:Cell, grid:Grid, rowIdx:number, fieldName:string){
        if (target.domElement && this._cetxt) {
            grid.updateCell(rowIdx, fieldName, (<HTMLInputElement>this._cetxt).value);
            target.domElement.removeChild(this._cetxt);
            this._cetxt = null;
            target.setDivVisible(true);
            target.isEditBoxCreated = false;
        }
    }
    private _inputTextListen(grid:Grid, cell:Cell){
        //event listener
        if(this._cetxt){
            let cellEditor = this;
            let rowIdx = grid.selectedCellInfo.rowIndex;
            let fieldName = grid.selectedCellInfo.fieldName;
            this._cetxt.addEventListener(EventCollection.EVENT_KEYDOWN, function(event:KeyboardEvent){
                if((event).keyCode ==KeyCollection.ENTER){
                    if(cell&&grid&&rowIdx!=undefined&&fieldName){
                        cellEditor.removeEditText(cell, grid, rowIdx, fieldName);
                    }
                }
            });
        }
    }
}