import { Node, mergeAttributes, ReactNodeViewRenderer } from "@tiptap/react";
import { ActionChecklistBlockView } from "./action-checklist-block-view";

export interface ActionChecklistItem {
  text: string;
  done: boolean;
}

export const ActionChecklist = Node.create({
  name: "actionChecklist",
  group: "block",
  atom: true,
  draggable: true,

  addAttributes() {
    return {
      items: {
        default: [] as ActionChecklistItem[],
      },
      // Set once the items have been pushed into the real task list, so the
      // button doesn't create duplicates on a second click.
      tasksCreated: {
        default: false,
      },
    };
  },

  parseHTML() {
    return [{ tag: 'div[data-type="action-checklist"]' }];
  },

  renderHTML({ HTMLAttributes }) {
    return ["div", mergeAttributes(HTMLAttributes, { "data-type": "action-checklist" })];
  },

  addNodeView() {
    return ReactNodeViewRenderer(ActionChecklistBlockView);
  },
});