import * as React from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import { RangeSlider } from './range-slider';
import { Label } from '../label/label';

const meta = {
  title: 'Components/RangeSlider',
  component: RangeSlider,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Numeric slider for a single value or a range. The thumb count follows the length of `value`/`defaultValue`, so one component covers both cases — values are always arrays.',
      },
    },
  },
  tags: ['autodocs'],
  decorators: [
    (Story) => (
      <div className="w-80 py-4">
        <Story />
      </div>
    ),
  ],
} satisfies Meta<typeof RangeSlider>;

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

export const Single: Story = {
  args: { defaultValue: [40], 'aria-label': 'Volume' },
};

export const Range: Story = {
  args: { defaultValue: [20, 70], thumbLabels: ['Minimum', 'Maximum'] },
};

export const WithMarks: Story = {
  args: {
    defaultValue: [50],
    step: 25,
    'aria-label': 'Rating',
    marks: [{ value: 0 }, { value: 25 }, { value: 50 }, { value: 75 }, { value: 100 }],
  },
  decorators: [
    (Story) => (
      <div className="w-80 pt-4 pb-10">
        <Story />
      </div>
    ),
  ],
};

export const Disabled: Story = {
  args: { defaultValue: [30, 60], disabled: true, thumbLabels: ['Minimum', 'Maximum'] },
};

export const Vertical: Story = {
  args: { defaultValue: [40], orientation: 'vertical', 'aria-label': 'Level' },
  decorators: [
    (Story) => (
      <div className="h-56 py-4">
        <Story />
      </div>
    ),
  ],
};

/** Controlled, with the selected span rendered beside it. */
export const PriceFilter: Story = {
  args: { defaultValue: [120, 640] },
  render: function PriceFilterStory() {
    const [value, setValue] = React.useState([120, 640]);

    return (
      <div className="grid gap-4">
        <div className="flex items-baseline justify-between">
          <Label>Price range</Label>
          <span className="text-sm tabular-nums text-muted-foreground">
            ${value[0]} – ${value[1]}
          </span>
        </div>
        <RangeSlider
          min={0}
          max={1000}
          step={10}
          value={value}
          onValueChange={setValue}
          thumbLabels={['Lowest price', 'Highest price']}
        />
      </div>
    );
  },
};