import { describe, expect, it } from "@suaveplan/testing/runner";
import { act, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { StreamProvider } from "../../provider/stream-provider.js";
import { FakeSession } from "../../test-utils.js";
import { StreamRoom } from "./stream-room.js";

describe("<StreamRoom>", () => {
    it("invokes the render-prop with the live snapshot", {
        timeout: 5000,
    }, () => {
        const session = new FakeSession({
            state: "joined",
            roomId: "lobby",
            peers: [
                {
                    id: "a",
                    displayName: "A",
                    connectionState: "connected",
                    rttMs: 5,
                },
            ],
        });
        render(
            <StreamProvider sessionFactory={() => session}>
                <StreamRoom>
                    {({ roomId, participants, isJoined }) => (
                        <div>
                            <span data-testid="room">{roomId}</span>
                            <span data-testid="joined">{String(isJoined)}</span>
                            <span data-testid="count">
                                {participants.length}
                            </span>
                        </div>
                    )}
                </StreamRoom>
            </StreamProvider>
        );
        expect(screen.getByTestId("room")).toHaveTextContent("lobby");
        expect(screen.getByTestId("joined")).toHaveTextContent("true");
        expect(screen.getByTestId("count")).toHaveTextContent("1");
    });

    it("wires join/leave callbacks through to the session", {
        timeout: 5000,
    }, async () => {
        const user = userEvent.setup();
        const session = new FakeSession({
            state: "connected",
            roomId: "x",
        });
        render(
            <StreamProvider sessionFactory={() => session}>
                <StreamRoom>
                    {({ join, leave, isJoined }) => (
                        <button
                            type="button"
                            onClick={() => (isJoined ? leave() : join())}
                        >
                            {isJoined ? "leave" : "join"}
                        </button>
                    )}
                </StreamRoom>
            </StreamProvider>
        );
        const btn = screen.getByRole("button");
        expect(btn).toHaveTextContent("join");
        await act(async () => {
            await user.click(btn);
        });
        expect(session.state).toBe("joined");
    });

    it("re-renders when peers change", { timeout: 5000 }, () => {
        const session = new FakeSession({ state: "joined" });
        render(
            <StreamProvider sessionFactory={() => session}>
                <StreamRoom>
                    {({ participants }) => (
                        <span data-testid="n">{participants.length}</span>
                    )}
                </StreamRoom>
            </StreamProvider>
        );
        expect(screen.getByTestId("n")).toHaveTextContent("0");
        act(() => {
            session.pushPeer({
                id: "z",
                displayName: "Z",
                connectionState: "connected",
                rttMs: 9,
            });
        });
        expect(screen.getByTestId("n")).toHaveTextContent("1");
    });
});