import type { ReactNode } from "react";
import { StreamProvider } from "../../provider/stream-provider.js";
import type { PeerMixerState } from "../../session/session-shape/session-shape.types.js";
import { FakeSession } from "../../test-utils.js";
import { StreamMixer } from "./stream-mixer.js";

const m = (
    id: string,
    extra: Partial<PeerMixerState> = {}
): PeerMixerState => ({
    id,
    volume: 1,
    muted: false,
    soloed: false,
    fxSlotCount: 0,
    ...extra,
});

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

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

export const Default = (): ReactNode =>
    wrap(
        new FakeSession({
            mixer: [m("alice", { volume: 0.8 }), m("bob", { volume: 0.6 })],
        }),
        <StreamMixer />
    );

export const SoloedPeer = (): ReactNode =>
    wrap(
        new FakeSession({
            mixer: [
                m("alice", { volume: 0.8, soloed: true }),
                m("bob", { volume: 0 }),
                m("carol", { volume: 0 }),
            ],
        }),
        <StreamMixer label="Solo demonstration" />
    );

export const Playground = (): ReactNode =>
    wrap(
        new FakeSession({
            mixer: Array.from({ length: 6 }).map((_, i) =>
                m(`peer-${i}`, { volume: 0.5 + i * 0.05, fxSlotCount: i })
            ),
        }),
        <StreamMixer label="Six-peer mixer" />
    );

export const CustomRender = (): ReactNode =>
    wrap(
        new FakeSession({ mixer: [m("alice"), m("bob", { soloed: true })] }),
        <StreamMixer
            renderStrip={(peer, controls) => (
                <article
                    style={{
                        display: "flex",
                        gap: 8,
                        padding: 8,
                        border: "1px solid currentColor",
                    }}
                >
                    <strong>{peer.id}</strong>
                    <span>{peer.soloed ? "SOLO" : ""}</span>
                    <button
                        type="button"
                        onClick={() => controls.setMute(!peer.muted)}
                    >
                        {peer.muted ? "unmute" : "mute"}
                    </button>
                </article>
            )}
        />
    );