import { Node, mergeAttributes, ReactNodeViewRenderer } from "@tiptap/react";
import type { NodeViewProps } from "@tiptap/react";
import { ReminderBlockView } from "./reminder-block-view";

export interface ReminderBlockOptions {
  parentNoteId: string;
  parentNoteTitle: string;
}

export const ReminderBlock = Node.create<ReminderBlockOptions>({
  name: "reminderBlock",
  group: "block",
  atom: true,
  draggable: true,

  addOptions() {
    return {
      parentNoteId: "",
      parentNoteTitle: "",
    };
  },

  addAttributes() {
    return {
      reminderId: { default: null },
      title: { default: null },
      remindAt: { default: null },
      status: { default: null },
    };
  },

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

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

  addNodeView() {
    return ReactNodeViewRenderer((props: NodeViewProps) => (
      <ReminderBlockView {...props} options={this.options} />
    ));
  },
});