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

import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';
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 Sandbox = createSandboxStory({
  code: `const App = () => {
  const [value, setValue] = React.useState('+447573135343');

  return (
    <Field label="Phone number">
      <PhoneNumberInput
        initialValue="+447573135343"
        size="md"
        placeholder="Enter phone number"
        searchPlaceholder="Search country"
        onChange={console.log}
      />
    </Field>
  );
};`,
  scope: globalScope,
});

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>
  ));
};
