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

const JSX_BADGES_DOC = `### Since

<Since v="1.5.0" />

<Since v="2.0.0" prefix="Available since" />

### Label

<Label label="Required" />

<Label label="Optional" />

<Label label="Deprecated" />

<Label label="Required" /><Label label="Optional" />
`;

describe("MarkdownEditor / inline JSX badges", () => {
    it("renders all Since and Label components inline like the viewer", async () => {
        mountStory(
            <MantineProvider
                theme={MANTINE_THEME}
                cssVariablesResolver={v8CssVariablesResolver}
                forceColorScheme="dark"
            >
                <Paper
                    p="md"
                    withBorder
                >
                    <MarkdownEditor
                        mode="preview"
                        document={JSX_BADGES_DOC}
                        autoFocus={false}
                        jsxMode="render"
                    />
                </Paper>
            </MantineProvider>,
        );

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

        const badges = document.querySelectorAll(".mantine-Badge-label");
        expect(badges.length).toBe(7);
        expect(document.body.textContent).toContain("1.5.0");
        expect(document.body.textContent).toContain("Required");
        expect(document.body.textContent).toContain("Optional");
        expect(document.body.textContent).toContain("Deprecated");
        expect(document.querySelector(".cm-content")?.textContent).not.toContain("<Since");
        expect(document.querySelector(".cm-content")?.textContent).not.toContain("<Label");
    });
});
