import { ControlPanel } from "./designerClasses";

// 表格类
class Table {
  render(tableInfo) {
    this.proccessTableData(tableInfo);
  }
  showDesignerInfo(instanceOfCell) {
    const cellInfoElements = document
      .getElementById("cell-info")
      .getElementsByTagName("input");
    for (let i = 0; i < cellInfoElements.length; i++) {
      for (const key of Object.keys(instanceOfCell)) {
        if (key === cellInfoElements[i].name) {
          cellInfoElements[i].value = instanceOfCell[key];
        }
      }
    }
  }
  proccessTableData(tableInfo) {
    const tableElement: HTMLTableElement = <HTMLTableElement>(
      document.getElementById("table")
    );
    while (tableElement.firstChild) {
      tableElement.removeChild(tableElement.firstChild);
    }

    for (const eachrow of tableInfo) {
      const row = tableElement.insertRow(-1);

      for (const cell of eachrow.cells) {
        const letter = String.fromCharCode(
          "A".charCodeAt(0) + eachrow.cells.indexOf(cell) - 1
        );

        const cellElement = cell.CreateCellElement();

        row.appendChild(cellElement);

        cellElement.addEventListener("dblclick", () => {
          this.showDesignerInfo(cell);
        });

        cellElement.addEventListener(
          "contextmenu",
          ev => {
            ev.preventDefault();
            const dropDownElement = document.getElementById("cntnr");
            dropDownElement.style.left = ev.pageX + "px";
            dropDownElement.style.top = ev.pageY + "px";
            dropDownElement.style.display = "block";

            this.cellRightClickHandler(ev, tableInfo);
          },
          false
        );

        // cellElement.innerHTML = i && j ? cellElement.innerHTML : i || letter;
        if (!(tableInfo.indexOf(eachrow) && eachrow.cells.indexOf(cell))) {
          cellElement.innerHTML = tableInfo.indexOf(eachrow) || letter;
        }
      }
    }
  }

  deleteCurrentRow(tableInfo, id) {
    for (const row of tableInfo) {
      for (const cell of row.cells) {
        if (cell.cellId === id) {
          tableInfo.splice(tableInfo.indexOf(row), 1);
          this.render(tableInfo);
          break;
        }
      }
    }
  }
  deleteTable(tableInfo) {
    tableInfo.splice(0, tableInfo.length);
    this.render(tableInfo);
  }
  addRowBefore(tableInfo, id) {
    // console.log("hello", id);
    // for (const row of tableInfo) {
    //   for (const cell of row.cells) {
    //     if (cell.cellId === id) {
    //       const newRow = row;
    //       // tableInfo.splice(tableInfo.indexOf(row), 0, newRow);
    //       // this.render(tableInfo);
    //       break;
    //     }
    //   }
    // }
  //


// eventlistener occur more than once


  //
  cellRightClickHandler(ev, tableInfo) {
    const deleteTableElement = document.getElementById("delete-table");
    const deleteCurrenRowElement = document.getElementById(
      "delete-current-row"
    );
    const insertTopRowElement = document.getElementById("insert-top-row");
    deleteTableElement.addEventListener("click", () => {
      this.deleteTable(tableInfo);
    });
    deleteCurrenRowElement.addEventListener("click", () => {
      this.deleteCurrentRow(tableInfo, ev.target.id);
    });
    insertTopRowElement.addEventListener("click", () => {
      console.log(123);
      // this.addRowBefore(tableInfo, ev.target.id);
    });
  }
  deleteCurrenCol() {}
  insertColToLeft() {}
  insertColToRight() {}
  insertRowToTop() {}
  insertRowToBottom() {}
  mergeRightCell() {}
  mergeBottomCell() {}

  addTemplate() {}
  addFormHeader() {}
  addSplitedGroupHeader() {}
  addBanCaiDetails() {}
  addSplitedGroupFooter() {}
  addFormFooter() {}
}

// 单元类
class Cell {
  cellId: string;
  content: string;
  font: string;
  fontSize: string;
  fontColor: string;
  fontWeight: string;
  fontStyle: string;
  textDecoration: string; // underline or line throught
  border: string;
  backgroundColor: string;
  textAlign: string;
  className: string;
  constructor(id) {
    this.cellId = id;
    this.content = this.cellId;
    this.font = "Serif";
    this.fontSize = "12";
    this.fontColor = "black";
    this.fontWeight = "normal";
    this.fontStyle = "normal";
    this.textDecoration = "none";
    this.border = "1";
    this.backgroundColor = "";
    this.textAlign = "left";
    this.className = "normal";
  }

  CreateCellElement() {
    let tdElement = document.createElement("td");

    tdElement.style.fontFamily = this.font;
    tdElement.style.backgroundColor = this.backgroundColor;

    tdElement.style.border = this.border + "px solid";
    tdElement.style.fontSize = this.fontSize + "px";
    tdElement.style.color = this.fontColor;
    tdElement.style.fontWeight = this.fontWeight;
    tdElement.style.fontStyle = this.fontStyle;
    tdElement.style.textDecoration = this.textDecoration;
    tdElement.style.textAlign = this.textAlign;
    tdElement.innerHTML = this.content;
    tdElement.className = this.className;
    tdElement.id = this.cellId;

    return tdElement;
  }
}

export { Table, Cell };