import { render } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { NotesEditor } from "./NotesEditor";

// Mock BlockNote components
vi.mock("@blocknote/react", () => ({
  useCreateBlockNote: () => ({
    document: [],
  }),
}));

vi.mock("@blocknote/mantine", () => ({
  BlockNoteView: ({ theme, editable }: { theme: string; editable: boolean }) => (
    <div data-testid="blocknote-view" data-theme={theme} data-editable={editable}>
      BlockNote Editor
    </div>
  ),
}));

vi.mock("@xtablo/shared/contexts/ThemeContext", () => ({
  useTheme: () => ({ theme: "light" }),
}));

describe("NotesEditor", () => {
  it("renders without crashing", () => {
    const { container } = render(<NotesEditor initialContent="" />);
    expect(container).toBeInTheDocument();
  });

  it("renders BlockNoteView", () => {
    const { getByTestId } = render(<NotesEditor initialContent="" />);
    expect(getByTestId("blocknote-view")).toBeInTheDocument();
  });

  it("applies light theme by default", () => {
    const { getByTestId } = render(<NotesEditor initialContent="" />);
    expect(getByTestId("blocknote-view")).toHaveAttribute("data-theme", "light");
  });

  it("is editable by default", () => {
    const { getByTestId } = render(<NotesEditor initialContent="" />);
    expect(getByTestId("blocknote-view")).toHaveAttribute("data-editable", "true");
  });

  it("is not editable when readOnly is true", () => {
    const { getByTestId } = render(<NotesEditor initialContent="" readOnly={true} />);
    expect(getByTestId("blocknote-view")).toHaveAttribute("data-editable", "false");
  });

  it("accepts onChange callback", () => {
    const onChange = vi.fn();
    render(<NotesEditor initialContent="" onChange={onChange} />);
    // The component is rendered successfully with onChange
    expect(onChange).not.toHaveBeenCalled(); // Not called on initial render
  });

  it("accepts initialContent", () => {
    const initialContent = JSON.stringify([{ type: "paragraph", content: "Test" }]);
    render(<NotesEditor initialContent={initialContent} />);
    // Component renders without error
    expect(true).toBe(true);
  });

  it("renders with empty initial content", () => {
    render(<NotesEditor initialContent="" />);
    expect(true).toBe(true);
  });
});
