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

import { LocalizationProvider } from '@shoptet/ui-core-web';

import { NumberInput } from './NumberInput';

const meta: Meta<typeof NumberInput> = {
  title: 'UI kit/Form/Inputs/NumberInput',
  component: NumberInput,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    width: {
      control: { type: 'radio' },
      options: ['xs', 'sm', 'md', 'lg', 'xl'],
    },
    label: {
      control: { type: 'text' },
    },
    error: {
      control: { type: 'boolean' },
    },
    warning: {
      control: { type: 'boolean' },
    },
    disabled: {
      control: { type: 'boolean' },
    },
    readOnly: {
      control: { type: 'boolean' },
    },
    required: {
      control: { type: 'boolean' },
    },
  },
};

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

export const Default: Story = {
  args: {
    label: 'Number input',
    placeholder: 'Enter a number',
  },
};

export const WithDifferentLocale: Story = {
  render: args => {
    const [value, setValue] = React.useState<number | null>(null);
    const [locale, setLocale] = React.useState<'cs-CZ' | 'en-US'>('cs-CZ');

    return (
      <LocalizationProvider locale={locale}>
        <div>
          <div style={{ marginBottom: '10px' }}>
            <label>
              Locale:{' '}
              <select value={locale} onChange={e => setLocale(e.target.value as any)}>
                <option value='cs-CZ'>Czech (cs-CZ) - comma</option>
                <option value='en-US'>English (en-US) - dot</option>
                <option value='de-DE'>German (de-DE) - comma</option>
                <option value='sk-SK'>Slovak (sk-SK) - comma</option>
                <option value='hu-HU'>Hungarian (hu-HU) - comma</option>
                <option value='pl-PL'>Polish (pl-PL) - comma</option>
                <option value='ro-RO'>Romanian (ro-RO) - comma</option>
                <option value='vi-VN'>Vietnamese (vi-VN) - comma</option>
              </select>
            </label>
          </div>
          <NumberInput {...args} value={value} onChange={setValue} onBlur={setValue} />
          <div style={{ marginTop: '10px', fontSize: '14px', color: '#666' }}>
            Current value: {value === null ? 'null' : value}
          </div>
          <div style={{ fontSize: '12px', color: '#888' }}>
            Expected decimal separator for {locale}:{' '}
            {['cs-CZ', 'de-DE', 'hu-HU', 'pl-PL', 'ro-RO', 'sk-SK', 'vi-VN'].includes(locale) ? 'comma (,)' : 'dot (.)'}
          </div>
        </div>
      </LocalizationProvider>
    );
  },
  args: {
    label: 'Number input (locale-aware)',
    placeholder: 'Enter a number',
  },
};

export const WithDefaultValue: Story = {
  args: {
    label: 'Number input with default value',
    defaultValue: 42,
    placeholder: 'Enter a number',
  },
};

export const WithPlaceholder: Story = {
  args: {
    label: 'Age input',
    placeholder: 'Enter your age',
  },
};

export const PositiveNumber: Story = {
  args: {
    label: 'Positive number input',
    value: 42,
    placeholder: 'Enter a number',
  },
};

export const NegativeNumber: Story = {
  args: {
    label: 'Negative number input',
    value: -15,
    placeholder: 'Enter a number',
  },
};

export const ZeroValue: Story = {
  args: {
    label: 'Zero value input',
    value: 0,
    placeholder: 'Enter a number',
  },
};

export const Error: Story = {
  args: {
    label: 'Number input in error state',
    value: -999,
    placeholder: 'Enter a number',
    error: true,
  },
};

export const Warning: Story = {
  args: {
    label: 'Number input in warning state',
    value: 999,
    placeholder: 'Enter a number',
    warning: true,
  },
};

export const Disabled: Story = {
  args: {
    label: 'Disabled number input',
    value: 100,
    placeholder: 'Enter a number',
    disabled: true,
  },
};

export const ReadOnly: Story = {
  args: {
    label: 'Read-only number input',
    value: 500,
    placeholder: 'Enter a number',
    readOnly: true,
  },
};

export const Required: Story = {
  args: {
    label: 'Required number input',
    placeholder: 'Enter a number',
    required: true,
  },
};

export const WithName: Story = {
  args: {
    label: 'Quantity input',
    name: 'quantity',
    defaultValue: 1,
    placeholder: 'Enter quantity',
  },
};

export const Composed: Story = {
  render: () => {
    const [value, setValue] = React.useState<number | null>(3);

    return (
      <NumberInput value={value} min={0} max={10} step={1} onChange={setValue}>
        <NumberInput.DecrementButton />
        <NumberInput.Input label='Quantity' width='xs' />
        <NumberInput.IncrementButton />
      </NumberInput>
    );
  },
};