import { Node, Plugin } from "../../tiptap";
import { sinkListItem, splitToDefaultListItem, liftListItem } from "../../commands";

export default class TodoItem extends Node {
  get name() {
    return "todo_item";
  }

  get defaultOptions() {
    return {
      nested: false,
    };
  }

  // get view() {
  //   return {
  //     props: ["node", "updateAttrs", "view"],
  //     methods: {
  //       onChange() {
  //         console.log("onCh#########");
  //         this.updateAttrs({
  //           done: !this.node.attrs.done,
  //         });
  //       },
  //     },
  //     template: `
  //       <li :data-type="node.type.name" :data-done="node.attrs.done.toString()" data-drag-handle>
  //         <span class="todo-checkbox" contenteditable="true" onclick="onChange"></span>
  //         <div class="todo-content" ref="content" :contenteditable="view.editable.toString()"></div>
  //       </li>
  //     `,
  //   };
  // }

  get schema() {
    return {
      attrs: {
        done: {
          default: false,
        },
        content: {
          default: "",
        },
      },
      draggable: true,
      content: "paragraph+",
      toDOM: (node) => {
        const { done } = node.attrs;

        return [
          "li",
          {
            "data-type": this.name,
            "data-done": done.toString(),
          },
          ["span", { class: "todo-checkbox", contenteditable: "true" }],
          ["div", { class: "todo-content 11" }, 0],
        ];
      },
      parseDOM: [{
        priority: 51,
        tag: `[data-type="${this.name}"]`,
        getAttrs: (dom) => ({
          done: dom.getAttribute("data-done") === "true",
          content: "dddd", // dom.closest(".todo-content").textContent,
        }),
      }],
    };
  }

  keys({ type }) {
    return {
      Enter: splitToDefaultListItem(type),
      Tab: this.options.nested ? sinkListItem(type) : () => {},
      "Shift-Tab": liftListItem(type),
    };
  }

}
