import type { Meta, StoryObj } from "@storybook/react";
import { createPackedResourceManager } from "@suaveplan/packer-browser";
import { PackedResourceProvider } from "../../provider/packed-resource-provider/packed-resource-provider.js";
import { usePackedVideo } from "./use-packed-video.js";

const BYTES = new Uint8Array(16);

function makeManager(): ReturnType<typeof createPackedResourceManager> {
    return createPackedResourceManager({
        fetch: async (): Promise<Response> =>
            new Response(BYTES, {
                status: 200,
                headers: { "content-type": "video/webm" },
            }),
    });
}

function Demo({ src }: { src: string | null }): React.ReactElement {
    const { url, status, error } = usePackedVideo(src);
    return (
        <div>
            <p>status: {status}</p>
            <p>error: {error?.code ?? "<none>"}</p>
            {url !== null ? (
                <video controls src={url}>
                    <track kind="captions" />
                </video>
            ) : null}
        </div>
    );
}

const meta: Meta<typeof Demo> = {
    title: "react-packer/usePackedVideo",
    component: Demo,
};
export default meta;
type Story = StoryObj<typeof Demo>;

export const Default: Story = {
    render: () => (
        <PackedResourceProvider value={{ manager: makeManager() }}>
            <Demo src="/demo.video.packed" />
        </PackedResourceProvider>
    ),
};

export const Idle: Story = {
    render: () => (
        <PackedResourceProvider value={{ manager: makeManager() }}>
            <Demo src={null} />
        </PackedResourceProvider>
    ),
};

export const PlaygroundStory: Story = {
    name: "Playground",
    render: () => (
        <PackedResourceProvider value={{ manager: makeManager() }}>
            <Demo src="/playground.video.packed" />
        </PackedResourceProvider>
    ),
};