import type { Meta, StoryObj } from '@storybook/html';
import { ImageViewer, type ImageViewerOptions } from '@42/core/image-viewer';
import '@42/styles/image-viewer.css';

const meta: Meta<ImageViewerOptions> = {
  title: 'Core/Media/ImageViewer',
  tags: ['autodocs'],
  argTypes: {
    maxZoom: { control: { type: 'number', min: 1, max: 10 } },
  },
  args: { maxZoom: 7 },
  render: (args) => {
    const root = document.createElement('div');
    root.dataset.imageViewer = '';
    root.innerHTML = `
      <div data-c42-viewer-content>
        <img src="https://picsum.photos/id/1015/1200/800" alt="Sample" />
      </div>
      <div class="c42-viewer-controls">
        <button data-c42-viewer-zoom-in class="c42-viewer-btn" title="Zoom in">+</button>
        <button data-c42-viewer-zoom-out class="c42-viewer-btn" title="Zoom out">−</button>
        <button data-c42-viewer-reset class="c42-viewer-btn" title="Reset">↺</button>
        <button data-c42-viewer-expand class="c42-viewer-btn" title="Fullscreen">⛶</button>
      </div>
      <span data-c42-viewer-indicator></span>`;
    new ImageViewer(root, args);
    return root;
  },
};

export default meta;
type Story = StoryObj<ImageViewerOptions>;

export const Default: Story = {};