<script module>
	import { defineMeta } from "@storybook/addon-svelte-csf";
	import Video from "./Index.svelte";
	import { userEvent, within } from "storybook/test";
	import { allModes } from "../storybook/modes";
	import { wrapProps } from "../storybook/wrapProps";

	const video_sample = "/video_sample.mp4";

	const { Story } = defineMeta({
		title: "Components/Video",
		component: Video,
		parameters: {
			chromatic: {
				modes: {
					desktop: allModes["desktop"],
					mobile: allModes["mobile"]
				}
			}
		}
	});
</script>

{#snippet template(args)}
	<Video {...wrapProps(args)} />
{/snippet}

<Story
	name="Record from webcam"
	args={{
		format: "mp4",
		label: "world video",
		show_label: true,
		interactive: true,
		height: 400,
		width: 400,
		webcam_options: { mirror: true, constraints: null }
	}}
	{template}
/>
<Story
	name="Static video"
	args={{
		value: {
			path: video_sample,
			url: video_sample,
			orig_name: "video_sample.mp4"
		},
		label: "world video",
		show_label: true,
		buttons: ["download"],
		interactive: false,
		height: 200,
		width: 400,
		webcam_options: { mirror: true, constraints: null }
	}}
	{template}
/>
<Story
	name="Static video with vertical video"
	args={{
		value: {
			path: video_sample,
			url: video_sample,
			orig_name: "video_sample.mp4"
		},
		label: "world video",
		show_label: true,
		buttons: [],
		interactive: false,
		height: 200,
		width: 400,
		webcam_options: { mirror: true, constraints: null }
	}}
	{template}
/>
<Story
	name="Upload video"
	args={{
		label: "world video",
		show_label: true,
		interactive: true,
		sources: ["upload", "webcam"],
		width: 400,
		height: 400,
		value: null,
		webcam_options: { mirror: true, constraints: null }
	}}
	{template}
/>
<Story
	name="Upload video with download button"
	args={{
		label: "world video",
		show_label: true,
		interactive: true,
		sources: ["upload", "webcam"],
		buttons: ["download"],
		width: 400,
		height: 400,
		value: {
			path: video_sample,
			url: video_sample,
			orig_name: "video_sample.mp4"
		},
		webcam_options: { mirror: true, constraints: null }
	}}
	{template}
/>
<Story
	name="Trim video"
	args={{
		value: {
			path: video_sample,
			url: video_sample,
			orig_name: "video_sample.mp4"
		},
		label: "world video",
		show_label: true,
		interactive: "true",
		sources: ["upload"],
		width: 400,
		webcam_options: { mirror: true, constraints: null }
	}}
	play={async ({ canvasElement }) => {
		const canvas = within(canvasElement);
		const trimButton = canvas.getByLabelText("Trim video to selection");
		userEvent.click(trimButton);
	}}
	{template}
/>
