import type { Meta, StoryObj } from "@storybook/react";
import React from "react";

import VideoPlayer, { type IVideoPlayerProps } from "../src/react";

const DEMO_HLS_SOURCE = "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8";
const DEMO_POSTER =
	"https://images.unsplash.com/photo-1574267432553-4b4628081c31?auto=format&fit=crop&w=1280&q=80";

const meta: Meta<IVideoPlayerProps> = {
	title: "React/VideoPlayer",
	component: VideoPlayer,
	tags: ["autodocs"],
	args: {
		src: DEMO_HLS_SOURCE,
		type: "application/x-mpegurl",
		preload: "auto",
		muted: true,
		fluid: true,
		responsive: true,
		controls: true,
		aspectRatio: "16:9",
		preferHQ: false,
		width: 1280,
		height: 720,
		autoplay: false,
		lazy: false,
		debug: false,
		forceHover: false,
		full: true,
		withRewind: true,
		showErrors: false,
		showProcessing: false,
		withLoading: false,
		withBlur: false,
		duration: false,
		cover: "",
	},
	argTypes: {
		src: { control: "text" },
		type: {
			control: { type: "select" },
			options: [
				"application/x-mpegurl",
				"application/vnd.apple.mpegurl",
				"video/mp4",
			],
		},
		preload: {
			control: { type: "inline-radio" },
			options: ["auto", "metadata", "none", "visibility"],
		},
		aspectRatio: {
			control: { type: "select" },
			options: ["16:9", "4:3", "1:1", "none"],
		},
		full: { control: "boolean" },
		withRewind: { control: "boolean" },
		duration: {
			control: { type: "select" },
			options: [false, 30, 120, 1800],
		},
		cover: {
			control: "text",
			description: "Poster URL (string) or leave empty",
		},
		width: { control: { type: "number", min: 0, step: 1 } },
		height: { control: { type: "number", min: 0, step: 1 } },
		className: { control: false },
	},
	render: args => {
		const width = typeof args.width === "number" && args.width > 0 ? args.width : null;
		const height =
			typeof args.height === "number" && args.height > 0 ? args.height : null;

		return (
			<div style={{ maxWidth: 960, width: "100%" }}>
				<VideoPlayer
					{...args}
					width={width}
					height={height}
					cover={args.cover ? args.cover : DEMO_POSTER}
				/>
			</div>
		);
	},
};

export default meta;

type Story = StoryObj<IVideoPlayerProps>;

export const Playground: Story = {};