import type { Meta, StoryObj } from '@storybook/html';
import { Gallery, type GalleryOptions } from '@42/core/gallery';
import '@42/styles/gallery.css';

const PHOTOS = [
  'https://picsum.photos/id/1015/800/600',
  'https://picsum.photos/id/1025/800/600',
  'https://picsum.photos/id/1035/800/600',
  'https://picsum.photos/id/1045/800/600',
];

const meta: Meta<GalleryOptions> = {
  title: 'Core/Media/Gallery',
  tags: ['autodocs'],
  argTypes: {
    loop: { control: 'boolean' },
  },
  args: { loop: true },
  render: (args) => {
    const root = document.createElement('div');
    root.dataset.c42Gallery = '';
    const thumbs = PHOTOS.map(
      (src, i) =>
        `<button data-c42-gallery-item data-src="${src}"><img src="${src}?blur=1" alt="Photo ${i + 1}" /></button>`,
    ).join('');
    root.innerHTML = `
      ${thumbs}
      <div data-c42-gallery-lightbox>
        <div data-c42-gallery-overlay></div>
        <button data-c42-gallery-close aria-label="Close">\u00d7</button>
        <button data-c42-gallery-prev aria-label="Previous">\u2039</button>
        <img data-c42-gallery-image alt="" />
        <button data-c42-gallery-next aria-label="Next">\u203a</button>
      </div>`;
    new Gallery(root, args);
    return root;
  },
};

export default meta;

type Story = StoryObj<GalleryOptions>;

export const Default: Story = {};