import type { Meta, StoryObj } from '@storybook/html';
import { Progress, type ProgressOptions } from '@42/core/progress';
import '@42/styles/progress.css';

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

const progress = new Progress(document.querySelector('[data-c42-progress]')!, {
  value: 40,
  max: 100,
});

progress.setValue(75);`;

const meta: Meta<ProgressOptions> = {
  title: 'Core/Feedback & Status/Progress',
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: { code: snippet, language: 'ts' },
    },
  },
  argTypes: {
    value: { control: { type: 'range', min: 0, max: 100, step: 1 } },
    max: { control: { type: 'number', min: 1 } },
    indeterminate: { control: 'boolean' },
  },
  args: {
    value: 40,
    max: 100,
    indeterminate: false,
  },
  render: (args) => {
    const root = document.createElement('div');
    root.dataset.c42Progress = '';
    root.style.maxWidth = '24rem';
    root.innerHTML = `
      <div data-c42-progress-track>
        <div data-c42-progress-indicator></div>
      </div>
      <span data-c42-progress-label></span>`;
    new Progress(root, { ...args, label: 'Task progress' });
    return root;
  },
};

export default meta;

type Story = StoryObj<ProgressOptions>;

export const Default: Story = {};

export const Half: Story = { args: { value: 50 } };

export const Complete: Story = { args: { value: 100 } };

export const Indeterminate: Story = { args: { indeterminate: true } };