import { render } from "atomico";

class TodoView {
    dom: any

    updateAttrs(attrs) {
      if (!this.view.editable) {
        return;
      }

      const { state } = this.view;
      const { type } = this.node;
      const pos = this.getPos();
      const newAttrs = {
        ...this.node.attrs,
        ...attrs,
      };
      const transaction = this.isMark
        ? state.tr
          .removeMark(pos.from, pos.to, type)
          .addMark(pos.from, pos.to, type.create(newAttrs))
        : state.tr.setNodeMarkup(pos, null, newAttrs);

      console.log("this.view.dispatch(transaction)");
      this.view.dispatch(transaction);
    }

    view: any

    node: any

    isNode: boolean

    isMark: boolean

    getPos: Function

    constructor(node, view, getPos) {
      this.view = view;
      this.node = node;
      this.isNode = !!this.node.marks;
      this.isMark = !this.isNode;
      this.getPos = getPos;
      this.updateAttrs = this.updateAttrs.bind(this);

      // The editor will use this as the node's DOM representation
      // this.dom = document.createElement("kun-checkbox");
      // this.dom.checked = node.attrs.done;
      // const b = document.createElement("li");
      const node1 = document.createElement("LI"); // Create a <li> node
      node1.setAttribute("data-type", "todo_item");
      node1.setAttribute("data-done", node.attrs.done.toString());
      // adata-type=
      node1.className += "todo_item";
      const textnode = document.createElement("span");
      textnode.className += "todo-checkbox";
      // todo-checkbox

      const textnode2 = document.createElement("div");
      textnode2.contenteditable = true;
      textnode2.ref = "todo-content";
      textnode2.className += "todo-content";
      textnode2.class = "todo-content";
      textnode2.setAttribute("contenteditable", "true")
      // render(aHtml, this.dom);
      // console.log("this.dom", this.dom == null);
      // console.log("this.dom");
      node1.appendChild(textnode);
      node1.appendChild(textnode2);
      // b.appendChild("<span class=\"todo-checkbox\" contenteditable=\"false\"></span>");
      // eslint-disable-next-line max-len
      // b.appendChild("<div class=\"todo-content\" ref=\"content\" contenteditable=\"true\"\"></div>");
      this.dom = node1;
      this.dom["data-type"] = node.type.name;
      this.dom["data-done"] = node.attrs.done.toString();
      this.dom["data-drag-handle"] = "true";

      // this.dom.replace(
      //   `<li className="dddddddddddddd" data-type=${node.type.name} data-done="${node.attrs.done.toString()}" data-drag-handle>
      //           <span class="todo-checkbox" contenteditable="false"></span>
      //           <div class="todo-content" ref="content" contenteditable="true""></div>
      //       </li>
      //     `,
      // );
      //
      const D = (e) => {
        console.log("You clicked me toddddddddddddddddo!");
        console.log(this.node.attrs.done);
        console.log(this.view);
        this.updateAttrs({
          done: !this.node.attrs.done,
        });
        e.preventDefault();
      };
      // textnode.addEventListener("click", D.bind(this));
      // this.dom.addEventListener("click", () => {
      //   console.log("a");
      // });
      this.dom.addEventListener("click", D.bind(this));
      // return this.dom;
    }

    stopEvent() { return true; }
}


export default TodoView;
