import { MantineProvider, Paper, v8CssVariablesResolver } from "@mantine/core";
import { MarkdownEditor } from "@src/primitives/MarkdownEditor";
import { Since } from "@src/primitives/Since";
import { MANTINE_THEME } from "@src/theme/mantine";
import { describe, expect, it } from "vitest";
import { getEditorView, mountStory, nextFrame } from "../../_setup/e2e-helpers";

const JSX_DOC = `<Since v="9.9.9" />

Paragraph after component.
`;

describe("MarkdownEditor / JSX selection reveal", () => {
    it("shows JSX widget when inactive and raw source when caret is inside the tag", async () => {
        mountStory(
            <MantineProvider
                theme={MANTINE_THEME}
                cssVariablesResolver={v8CssVariablesResolver}
                forceColorScheme="dark"
            >
                <Paper
                    p="md"
                    withBorder
                >
                    <MarkdownEditor
                        mode="preview"
                        document={JSX_DOC}
                        autoFocus={false}
                        jsxMode="render"
                        components={{ Since }}
                    />
                </Paper>
            </MantineProvider>,
        );

        const view = await getEditorView();
        view.contentDOM.blur();
        await nextFrame();

        expect(document.body.textContent).toContain("9.9.9");
        expect(document.querySelector(".cm-content")?.textContent).not.toContain("<Since");
    });
});
