import { Node, mergeAttributes, ReactNodeViewRenderer } from "@tiptap/react";
import { StickerBlockView } from "./sticker-block-view";
import { DEFAULT_STICKER_ID } from "@/lib/notes/note-stickers";

export const StickerBlock = Node.create({
  name: "stickerBlock",
  group: "block",
  atom: true,
  draggable: false, // has its own pointer-based drag, not ProseMirror's

  addAttributes() {
    return {
      stickerId: { default: DEFAULT_STICKER_ID },
      x: { default: 50 }, // percent, relative to the note content area
      y: { default: 20 },
      scale: { default: 1 },
    };
  },

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

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

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