import type { ReactNode } from "react";
import { StreamProvider } from "../../provider/stream-provider.js";
import type { MediaPermissionState } from "../../session/session-shape/session-shape.types.js";
import { FakeSession } from "../../test-utils.js";
import { StreamPermissionsBanner } from "./stream-permissions-banner.js";

function wrap(
    permission: MediaPermissionState,
    children: ReactNode
): ReactNode {
    return (
        <StreamProvider sessionFactory={() => new FakeSession({ permission })}>
            {children}
        </StreamProvider>
    );
}

export default {
    title: "react-audio-stream/StreamPermissionsBanner",
    component: StreamPermissionsBanner,
};

export const Prompt = (): ReactNode =>
    wrap("prompt", <StreamPermissionsBanner />);
export const Denied = (): ReactNode =>
    wrap("denied", <StreamPermissionsBanner />);
export const Unknown = (): ReactNode =>
    wrap("unknown", <StreamPermissionsBanner />);
export const Granted = (): ReactNode =>
    wrap("granted", <StreamPermissionsBanner />);

export const Playground = (): ReactNode =>
    wrap(
        "prompt",
        <StreamPermissionsBanner
            requestLabel="Allow microphone"
            messages={{
                prompt: "We need your mic to stream live audio to other participants.",
            }}
        />
    );