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

const imageSlides = [
  { src: "https://picsum.photos/seed/gxp-1/800/400", alt: "Slide 1" },
  { src: "https://picsum.photos/seed/gxp-2/800/400", alt: "Slide 2" },
  { src: "https://picsum.photos/seed/gxp-3/800/400", alt: "Slide 3" },
]

const meta = {
  title: "Elements/Display/CarouselDisplay",
  component: CarouselDisplay,
  tags: ["autodocs"],
  args: {
    slides: imageSlides,
    loop: true,
    autoplay: false,
    autoplayDelayMs: 5000,
    showIndicators: true,
    showArrows: true,
  },
  parameters: componentDoc("CarouselDisplay", { barrel: "display" }),
  decorators: [
    () => ({
      template: '<div class="max-w-xl p-4"><story /></div>',
    }),
  ],
} satisfies Meta<typeof CarouselDisplay>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    slides: imageSlides,
  },
}

export const WithoutAutoplay: Story = {
  args: {
    slides: imageSlides,
    autoplay: false,
  },
}

export const WithAutoplay: Story = {
  args: {
    slides: imageSlides,
    autoplay: true,
    autoplayDelayMs: 2500,
  },
}

export const WithCaption: Story = {
  args: {
    slides: [
      {
        src: "https://picsum.photos/seed/cap-1/800/400",
        alt: "Sunset",
        caption: "Sunset over the bay",
      },
      {
        src: "https://picsum.photos/seed/cap-2/800/400",
        alt: "Mountain",
        caption: "Mountain at dawn",
      },
      {
        src: "https://picsum.photos/seed/cap-3/800/400",
        alt: "Forest",
        caption: "Forest trail",
      },
    ],
  },
}

export const NoArrows: Story = {
  args: {
    slides: imageSlides,
    showArrows: false,
  },
}

export const NoIndicators: Story = {
  args: {
    slides: imageSlides,
    showIndicators: false,
  },
}

export const HtmlSlides: Story = {
  args: {
    slides: [
      {
        html: '<div class="flex h-48 items-center justify-center bg-primary text-primary-foreground text-2xl font-bold rounded">HTML slide #1</div>',
      },
      {
        html: '<div class="flex h-48 items-center justify-center bg-secondary text-secondary-foreground text-2xl font-bold rounded">HTML slide #2</div>',
      },
      {
        html: '<div class="flex h-48 items-center justify-center bg-accent text-accent-foreground text-2xl font-bold rounded">HTML slide #3</div>',
      },
    ],
  },
}

export const Empty: Story = {
  args: {
    slides: [],
  },
}

export const Showcase: Story = {
  args: {} as never,
  render: () => ({
    components: { CarouselDisplay },
    setup() {
      return { imageSlides }
    },
    template: `
      <div class="flex flex-col gap-6">
        <div>
          <p class="text-sm font-medium mb-2">Default (with arrows + indicators)</p>
          <CarouselDisplay :slides="imageSlides" />
        </div>
        <div>
          <p class="text-sm font-medium mb-2">No arrows</p>
          <CarouselDisplay :slides="imageSlides" :show-arrows="false" />
        </div>
        <div>
          <p class="text-sm font-medium mb-2">No indicators</p>
          <CarouselDisplay :slides="imageSlides" :show-indicators="false" />
        </div>
      </div>
    `,
  }),
}
