import type { Meta, StoryObj } from '@storybook/html';
import { Carousel, type CarouselOptions } from '@42/core/carousel';
import '@42/styles/carousel.css';

const snippet = `import { Carousel } from '@42/core/carousel';
import '@42/styles/carousel.css';

const carousel = new Carousel(document.querySelector('[data-c42-carousel]')!, {
  loop: true,
  autoplay: false,
  swipe: true,
});

carousel.on('carousel:change', (e) => console.log(e.detail.index));`;

const COLORS = ['#4f46e5', '#0ea5e9', '#10b981', '#f59e0b'];

function build(): HTMLElement {
  const root = document.createElement('div');
  root.dataset.c42Carousel = '';
  root.style.maxWidth = '32rem';
  const slidesHtml = COLORS.map(
    (c, i) =>
      `<div data-c42-carousel-slide style="display:grid;place-items:center;block-size:12rem;background:${c};color:#fff;font-size:2rem;font-weight:600">Slide ${i + 1}</div>`,
  ).join('');
  root.innerHTML = `
    <div data-c42-carousel-viewport>
      <div data-c42-carousel-track>${slidesHtml}</div>
    </div>
    <button data-c42-carousel-prev aria-label="Previous slide">‹</button>
    <button data-c42-carousel-next aria-label="Next slide">›</button>
    <div data-c42-carousel-dots></div>`;
  return root;
}

const meta: Meta<CarouselOptions> = {
  title: 'Core/Disclosure & Layout/Carousel',
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: { code: snippet, language: 'ts' },
    },
  },
  argTypes: {
    loop: { control: 'boolean' },
    autoplay: { control: 'boolean' },
    autoplayInterval: { control: 'number' },
    swipe: { control: 'boolean' },
    dragFree: { control: 'boolean' },
    align: { control: 'select', options: ['start', 'center', 'end'] },
    slidesToScroll: { control: 'number' },
  },
  args: {
    loop: true,
    autoplay: false,
    swipe: true,
  },
  render: (args) => {
    const root = build();
    new Carousel(root, args);
    return root;
  },
};

export default meta;

type Story = StoryObj<CarouselOptions>;

export const Default: Story = {};

export const Autoplay: Story = {
  args: { autoplay: true, autoplayInterval: 2500, loop: true },
};

export const NoLoop: Story = {
  args: { loop: false },
};

export const MultipleSlides: Story = {
  args: { align: 'start', slidesToScroll: 1 },
  render: (args) => {
    const root = build();
    root
      .querySelectorAll<HTMLElement>('[data-c42-carousel-slide]')
      .forEach((slide) => (slide.style.flex = '0 0 50%'));
    new Carousel(root, args);
    return root;
  },
};