import { mergeAttributes, Node } from "@tiptap/core";
import type { Range } from "@tiptap/core";

declare module "@tiptap/core" {
  interface Commands<ReturnType> {
    pageMention: {
      insertPageMention: (attrs: { pageId: string; range?: Range }) => ReturnType;
    };
  }
}

export const SharedPageMentionNode = Node.create({
  name: "pageMention",
  inline: true,
  group: "inline",
  atom: true,
  selectable: true,
  draggable: false,

  addAttributes() {
    return {
      pageId: {
        default: null as string | null,
        parseHTML: (element) => element.getAttribute("data-page-id"),
        renderHTML: (attrs) => {
          if (!attrs.pageId) return {};
          return { "data-page-id": attrs.pageId };
        },
      },
    };
  },

  parseHTML() {
    return [{ tag: "span[data-page-mention][data-page-id]" }];
  },

  renderHTML({ HTMLAttributes }) {
    return ["span", mergeAttributes(HTMLAttributes, { "data-page-mention": "" }), ""];
  },

  addCommands() {
    return {
      insertPageMention:
        ({ pageId, range }) =>
        ({ chain, editor }) => {
          if (!editor.isEditable || !pageId) return false;
          const c = chain().focus(null, { scrollIntoView: false });
          if (range) c.deleteRange(range);
          return c
            .insertContent([
              { type: "pageMention", attrs: { pageId } },
              { type: "text", text: " " },
            ])
            .run();
        },
    };
  },
});