import { userEvent, within, fn } from 'storybook/test';

import InputWithDisplayFormat, { InputWithDisplayFormatProps } from '.';
import { Field, FieldProps } from '../field/Field';
import { Meta, type StoryObj } from '@storybook/react-webpack5';

type Story = StoryObj<InputWithDisplayFormatProps & { label: string }>;

const meta: Meta<typeof InputWithDisplayFormat> = {
  title: 'Forms/InputWithDisplayFormat',
  component: InputWithDisplayFormat,
  render: function Render({ label, ...args }: InputWithDisplayFormatProps & FieldProps) {
    return (
      <Field label={label} id={args.id}>
        <InputWithDisplayFormat id={args.id} {...args} />
      </Field>
    );
  },
  args: {
    onFocus: fn(),
    onBlur: fn(),
    onChange: fn(),
  },
} satisfies Meta<typeof InputWithDisplayFormat>;
export default meta;

export const Basic: Story = {
  args: {
    label: 'Sort Code',
    placeholder: '**-**-**',
    displayPattern: '**-**-**',
  },
};

export const CardNumber: Story = {
  args: {
    label: 'Card Number',
    placeholder: '**** **** **** **** ***',
    displayPattern: '**** **** **** **** ***',
  },
};

export const CVC: Story = {
  args: {
    label: 'CVC',
    placeholder: '***',
    displayPattern: '***',
    value: '',
  },
};

export const ExpiryDate: Story = {
  args: {
    label: 'Expiry Date',
    placeholder: '** / **',
    displayPattern: '** / **',
  },
};

export const SecurityPin: Story = {
  args: {
    label: 'Security Pin',
    placeholder: '*-*-*-*-*-*',
    displayPattern: '*-*-*-*-*-*',
  },
};