import "@blocknote/core/fonts/inter.css";
import type { BlockNoteEditor } from "@blocknote/core";
import "@blocknote/mantine/style.css";
import { BlockNoteView } from "@blocknote/mantine";
import { useCreateBlockNote } from "@blocknote/react";
import { useTheme } from "@xtablo/shared/contexts/ThemeContext";

interface NotesEditorProps {
  initialContent: string;
  onChange?: (content: string) => void;
  readOnly?: boolean;
}

export function NotesEditor({ initialContent, onChange, readOnly = false }: NotesEditorProps) {
  const { theme } = useTheme();

  // Create editor instance
  const editor: BlockNoteEditor = useCreateBlockNote({
    initialContent: initialContent ? JSON.parse(initialContent) : undefined,
  });

  // Handle changes
  const handleChange = () => {
    if (onChange && !readOnly) {
      const blocks = editor.document;
      onChange(JSON.stringify(blocks));
    }
  };

  return (
    <div className="w-full p-4">
      <BlockNoteView
        editor={editor}
        theme={theme === "dark" ? "dark" : "light"}
        editable={!readOnly}
        onChange={readOnly ? undefined : handleChange}
        data-theming-css
      />
    </div>
  );
}
