import { MantineProvider, v8CssVariablesResolver } from "@mantine/core";
import { unorderedBulletForDepth } from "@src/lib/markdown/view/components/ListBullet";
import { MarkdownViewer } from "@src/primitives/MarkdownViewer";
import { MANTINE_THEME } from "@src/theme/mantine";
import type { ReactElement } from "react";
import { renderToString } from "react-dom/server";
import { describe, expect, it } from "vitest";

function shell(node: ReactElement): string {
    return renderToString(
        <MantineProvider
            theme={MANTINE_THEME}
            cssVariablesResolver={v8CssVariablesResolver}
            forceColorScheme="dark"
        >
            {node}
        </MantineProvider>,
    );
}

describe("unorderedBulletForDepth", () => {
    it("cycles through bullet, circle, square by depth", () => {
        expect(unorderedBulletForDepth(0)).toBe("•");
        expect(unorderedBulletForDepth(1)).toBe("◦");
        expect(unorderedBulletForDepth(2)).toBe("▪");
    });

    it("repeats the sequence for deeper nesting", () => {
        expect(unorderedBulletForDepth(3)).toBe("•");
        expect(unorderedBulletForDepth(4)).toBe("◦");
        expect(unorderedBulletForDepth(5)).toBe("▪");
    });
});

describe("MarkdownViewer / nested list bullets", () => {
    it("renders distinct glyphs per nesting level", () => {
        const content = ["- top", "  - second", "    - third"].join("\n");
        const html = shell(<MarkdownViewer content={content} />);
        expect(html).toContain("•");
        expect(html).toContain("◦");
        expect(html).toContain("▪");
    });

    it("keeps ordered list markers as numbers regardless of depth", () => {
        const content = ["1. top", "   1. nested"].join("\n");
        const html = shell(<MarkdownViewer content={content} />);
        expect(html).not.toContain("◦");
    });
});
