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

import { Field } from '../field/Field';
import PhoneNumberInput from './PhoneNumberInput';

const meta = {
  component: PhoneNumberInput,
  title: 'Forms/PhoneNumberInput',
} satisfies Meta<typeof PhoneNumberInput>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Basic = {
  args: {
    searchPlaceholder: 'searchPlaceholder',
    placeholder: 'placeholder',
    selectProps: {
      className: 'custom-class',
    },
    onChange: () => {},
  },
} satisfies Story;

export const InitialValue = () => {
  const initialValues = [
    undefined,
    '+44',
    '+441',
    '+1',
    '+12',
    '+1234',
    '+1264',
    '+992',
    '+9999',
    '+99992',
  ];

  return initialValues.map((initialValue) => (
    <Field key={initialValue} label={`With initialValue: ${JSON.stringify(initialValue ?? null)}`}>
      <PhoneNumberInput initialValue={initialValue} placeholder="placeholder" onChange={() => {}} />
    </Field>
  ));
};