import type { Meta, StoryObj } from '@storybook/html';
import { Slider, type SliderOptions } from '@42/core/slider';
import '@42/styles/slider.css';

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

const slider = new Slider(document.querySelector('[data-c42-slider]')!, {
  min: 0,
  max: 100,
  step: 1,
  value: 40,
});

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

const meta: Meta<SliderOptions> = {
  title: 'Core/Inputs & Forms/Slider',
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: { code: snippet, language: 'ts' },
    },
  },
  argTypes: {
    min: { control: 'number' },
    max: { control: 'number' },
    step: { control: { type: 'number', min: 1 } },
  },
  args: {
    min: 0,
    max: 100,
    step: 1,
  },
  render: (args) => {
    const root = document.createElement('div');
    root.dataset.c42Slider = '';
    root.style.maxWidth = '20rem';
    root.innerHTML = `
      <div data-c42-slider-track>
        <div data-c42-slider-range></div>
        <div data-c42-slider-thumb aria-label="Value"></div>
      </div>`;
    new Slider(root, { ...args, value: 40 });
    return root;
  },
};

export default meta;

type Story = StoryObj<SliderOptions>;

export const Single: Story = {};

export const Range: Story = {
  render: (args) => {
    const root = document.createElement('div');
    root.dataset.c42Slider = '';
    root.style.maxWidth = '20rem';
    root.innerHTML = `
      <div data-c42-slider-track>
        <div data-c42-slider-range></div>
        <div data-c42-slider-thumb data-thumb="start" aria-label="Minimum"></div>
        <div data-c42-slider-thumb data-thumb="end" aria-label="Maximum"></div>
      </div>`;
    new Slider(root, { ...args, value: [25, 75] });
    return root;
  },
};

export const Stepped: Story = {
  args: { min: 0, max: 50, step: 10 },
};