class Table {
  rowLength: number;
  columnLength: number;
  selectedRow: string;
  selectedCell: string;
  instanceOfCells: any;
  constructor(rowLength: number, columnLength: number, instanceOfCells: any) {
    this.rowLength = rowLength;
    this.columnLength = columnLength;
    this.instanceOfCells = instanceOfCells;
    this.selectedRow;
    this.selectedCell;
  }
  render() {
    // clear children elements
    console.log("i am table render");
    var cellIndex = -1;

    var myNode = document.getElementById("table");
    while (myNode.firstChild) {
      myNode.removeChild(myNode.firstChild);
    }

    // loop through rowlength and collength
    for (var i = 0; i < this.rowLength; i++) {
      var table: HTMLTableElement = <HTMLTableElement>(
        document.getElementById("table")
      );
      var row = table.insertRow(-1);
      console.log(table);

      for (var j = 0; j < this.columnLength; j++) {
        var letter = String.fromCharCode("A".charCodeAt(0) + j - 1);

        const instanceOfCell = this.instanceOfCells[(cellIndex += 1)];
        const cellElement = instanceOfCell.cellElement();
        row.appendChild(cellElement);

        cellElement.addEventListener("dblclick", () => {
          this.showCellDetails(instanceOfCell);
        });

        cellElement.innerHTML = i && j ? instanceOfCell.cellId : i || letter;
      }
    }
  }
  showCellDetails(instanceOfCell) {
    var cellInfoElement = document.getElementById("cellInfo");
    while (cellInfoElement.firstChild) {
      cellInfoElement.removeChild(cellInfoElement.firstChild);
    }
    const cellUlElement = document.createElement("ul");

    for (const key in instanceOfCell) {
      if (instanceOfCell.hasOwnProperty(key)) {
        const cellLiElement = document.createElement("li");
        const cellLableElement = document.createElement("label");
        const cellInputElement = document.createElement("input");

        cellLableElement.innerHTML = key;

        cellInputElement.setAttribute("value", instanceOfCell[key]);
        cellInputElement.setAttribute("name", key);
        cellInputElement.setAttribute("class", "cell-detail");

        cellLiElement.appendChild(cellLableElement);
        cellLiElement.appendChild(cellInputElement);
        cellUlElement.appendChild(cellLiElement);
      }
    }

    const cellButtonElement = document.createElement("button");
    cellButtonElement.innerHTML = "确定";
    cellButtonElement.onclick = () => {
      const inputElements = document.getElementsByClassName("cell-detail");
      for (const key in instanceOfCell) {
        // type script error---------------------------
        // for (const input of inputElements) {
        //   if (key === input.name) {
        //     instanceOfCell[key] = input.value;
        //   }
        // }
      }

      this.render();
    };
    cellInfoElement.appendChild(cellUlElement);
    cellInfoElement.appendChild(cellButtonElement);
  }
}

class Cell {
  cellId: string;
  border: string;
  color: string;
  width: number;
  colspan: string;
  fontSize: string;
  constructor(id) {
    this.cellId = id;
    this.border = "";
    this.color = "";
    this.width = 80;
    this.colspan = "1";
    this.fontSize = "12";
  }

  setColor(newColor: string) {
    this.color = newColor;
  }
  setBorder(newBorder: string) {
    this.border = newBorder;
  }
  setColspan(newColspan: string) {
    this.colspan = newColspan;
  }
  setFontSize(newFontSize: string) {
    this.fontSize = newFontSize;
  }

  cellElement() {
    let tdElement = document.createElement("td");
    tdElement.setAttribute("colspan", this.colspan);
    tdElement.style.backgroundColor = this.color;
    tdElement.style.width = this.width + "px";
    tdElement.style.border = this.border + "px solid";
    tdElement.style.fontSize = this.fontSize + "px";
    tdElement.innerHTML = this.cellId;

    return tdElement;
  }
}

export { Table, Cell };