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

import { InputNumber } from './input-number';
import { Label } from '../label/label';

const meta = {
  title: 'Components/InputNumber',
  component: InputNumber,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Numeric input with stepper controls. A plain `<input type="number">` has no formatting hook, silently accepts `e` and `+`, and steps inconsistently across browsers. This is a text input carrying `role="spinbutton"`, so the value is announced with its bounds while `formatter`/`parser` stay free to show currency or units. Clamping happens on commit, never mid-keystroke.',
      },
    },
  },
  tags: ['autodocs'],
  decorators: [(Story) => <div className="w-48"><Story /></div>],
} satisfies Meta<typeof InputNumber>;

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

export const Default: Story = {
  args: { defaultValue: 3, min: 0, max: 99 },
};

export const WithLabel: Story = {
  render: (args) => (
    <div className="grid gap-2">
      <Label htmlFor="seats">Seats</Label>
      <InputNumber id="seats" {...args} />
    </div>
  ),
  args: { defaultValue: 5, min: 1, max: 50 },
};

/** `formatter`/`parser` keep the display formatted while the value stays a number. */
export const Currency: Story = {
  args: {
    defaultValue: 1250,
    min: 0,
    step: 50,
    formatter: (value) => `$ ${value ?? ''}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
    parser: (display) => Number(display?.replace(/\$\s?|,/g, '') ?? 0),
  },
};

export const Percentage: Story = {
  args: {
    defaultValue: 25,
    min: 0,
    max: 100,
    step: 5,
    formatter: (value) => `${value ?? 0}%`,
    parser: (display) => Number(display?.replace('%', '') ?? 0),
  },
};

export const Decimals: Story = {
  args: { defaultValue: 1.5, step: 0.1, precision: 2, min: 0, max: 10 },
};

export const WithoutControls: Story = {
  args: { defaultValue: 42, controls: false },
};

export const Disabled: Story = {
  args: { defaultValue: 7, disabled: true },
};