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

import { RangeInput } from './RangeInput';

const meta: Meta<typeof RangeInput> = {
  title: 'UI kit/Form/Inputs/RangeInput',
  component: RangeInput,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
};

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

// Basic Usage Stories
export const Default: Story = {
  args: {
    label: 'Price Range',
    separator: ' - ',
    placeholder: 'Min - Max',
  },
  parameters: {
    docs: {
      description: {
        story: 'Basic range input with default styling and behavior.',
      },
    },
  },
};

export const WithDefaultValue: Story = {
  args: {
    label: 'Price Range',
    separator: ' - ',
    defaultValue: '100 - 500',
    placeholder: 'Min - Max',
  },
  parameters: {
    docs: {
      description: {
        story: 'Range input with a default value pre-filled.',
      },
    },
  },
};

export const Controlled: Story = {
  args: {
    label: 'Date Range',
    separator: ' to ',
    value: '2024-01-01 to 2024-12-31',
  },
  parameters: {
    docs: {
      description: {
        story: 'Controlled range input where the value is managed externally.',
      },
    },
  },
};

// Separator Variations
export const DashSeparator: Story = {
  args: {
    label: 'Age Range',
    separator: '-',
    placeholder: 'Min-Max',
  },
  parameters: {
    docs: {
      description: {
        story: 'Range input using a dash as separator.',
      },
    },
  },
};

export const PipeSeparator: Story = {
  args: {
    label: 'Score Range',
    separator: ' | ',
    placeholder: 'Low | High',
  },
  parameters: {
    docs: {
      description: {
        story: 'Range input using a pipe character as separator.',
      },
    },
  },
};

export const ToSeparator: Story = {
  args: {
    label: 'Time Range',
    separator: ' to ',
    placeholder: 'Start to End',
    defaultValue: '9:00 to 17:00',
  },
  parameters: {
    docs: {
      description: {
        story: 'Range input using "to" as separator for time ranges.',
      },
    },
  },
};

export const ErrorState: Story = {
  args: {
    label: 'Price Range',
    separator: ' - ',
    placeholder: 'Min - Max',
    error: true,
    defaultValue: '500 - 100',
  },
  parameters: {
    docs: {
      description: {
        story: 'Range input in error state, typically when validation fails (e.g., max value is less than min value).',
      },
    },
  },
};

export const WarningState: Story = {
  args: {
    label: 'Budget Range',
    separator: ' - ',
    placeholder: 'Min - Max',
    warning: true,
    defaultValue: '10000 - 50000',
  },
  parameters: {
    docs: {
      description: {
        story: 'Range input in warning state, typically for values that need attention but are not errors.',
      },
    },
  },
};

export const LoadingState: Story = {
  args: {
    label: 'Price Range',
    separator: ' - ',
    placeholder: 'Loading...',
    loading: true,
  },
  parameters: {
    docs: {
      description: {
        story: 'Range input in loading state, showing a loading indicator.',
      },
    },
  },
};

export const DisabledState: Story = {
  args: {
    label: 'Price Range',
    separator: ' - ',
    placeholder: 'Min - Max',
    disabled: true,
    defaultValue: '100 - 500',
  },
  parameters: {
    docs: {
      description: {
        story: 'Range input in disabled state, preventing user interaction.',
      },
    },
  },
};