import type { Meta, StoryObj } from 'storybook-react-rsbuild';
import { Slider } from '../components/ui';

const meta = {
  title: 'Inputs/Slider',
  component: Slider,
  parameters: {
    docs: {
      description: {
        component:
          'Radix Slider in the carved-track skin. All Radix Slider props pass through (`defaultValue`, `min`, `max`, `step`, `onValueChange`). Set `marks` to carve step notches into the track — `marks` snaps to the Radix `step`.',
      },
    },
  },
  args: { defaultValue: [60], min: 0, max: 100, step: 1 },
  argTypes: {
    defaultValue: { control: 'object', description: 'Uncontrolled starting value(s).' },
    min: { control: 'number' },
    max: { control: 'number' },
    step: { control: 'number', description: 'Snap increment (also drives auto `marks`).' },
    disabled: { control: 'boolean' },
    marks: {
      control: 'boolean',
      description: 'Step marks. `true` derives one per `step`; or pass an array for custom/labelled marks.',
    },
    notches: {
      control: 'inline-radio',
      options: ['top', 'bottom', 'both', 'none'],
      description: 'Notch tick placement relative to the track (labels still render when `none`).',
    },
    knobStyle: {
      control: 'inline-radio',
      options: ['square', 'round'],
      description: 'Knob shape: `square` (default) or `round`.',
    },
    className: { control: 'text' },
  },
  decorators: [(Story) => <div style={{ width: 280 }}><Story /></div>],
} satisfies Meta<typeof Slider>;

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

export const Playground: Story = {};

/** `marks` auto-derives one notch per `step`. */
export const Stepped: Story = {
  args: { defaultValue: [40], step: 10, marks: true },
};

/** `notches='both'` carves ticks above and below the bar. */
export const NotchesBoth: Story = {
  args: { defaultValue: [60], step: 20, marks: true, notches: 'both' },
};

/** Pass an array of `{ value, label }` for labelled ticks. */
export const LabelledMarks: Story = {
  args: {
    defaultValue: [50],
    step: 25,
    notches: 'bottom',
    marks: [
      { value: 0, label: 'Off' },
      { value: 25, label: 'Low' },
      { value: 50, label: 'Mid' },
      { value: 75, label: 'High' },
      { value: 100, label: 'Max' },
    ],
  },
};

export const Disabled: Story = {
  args: { defaultValue: [30], step: 10, marks: true, disabled: true },
};