import type { Meta, StoryObj } from "@storybook/vue3-vite"
import VideoPlayerDisplay from "./VideoPlayerDisplay.vue"
import { componentDoc } from "@/lib/storybook"

const SAMPLE_MP4 =
  "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"

const meta = {
  title: "Elements/Display/VideoPlayerDisplay",
  component: VideoPlayerDisplay,
  tags: ["autodocs"],
  args: {
    src: SAMPLE_MP4,
  },
  parameters: componentDoc("VideoPlayerDisplay", { barrel: "display" }),
  decorators: [
    () => ({
      template: '<div class="max-w-2xl p-4"><story /></div>',
    }),
  ],
} satisfies Meta<typeof VideoPlayerDisplay>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { src: SAMPLE_MP4 },
}

export const WithCustomContent: Story = {
  args: {
    src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
  },
}

export const Autoplay: Story = {
  args: { src: SAMPLE_MP4, autoplay: true, muted: true, loop: true },
}

export const Showcase: Story = {
  args: {} as never,
  render: () => ({
    components: { VideoPlayerDisplay },
    template: `
      <VideoPlayerDisplay src="${SAMPLE_MP4}" />
    `,
  }),
}
