import { userEvent, within } from 'storybook/test';
import { Meta, StoryObj } from '@storybook/react-webpack5';

import InputWithDisplayFormat, { InputWithDisplayFormatProps } from '.';
import { Field, FieldProps } from '../field/Field';

const meta: Meta<typeof InputWithDisplayFormat> = {
  title: 'Forms/InputWithDisplayFormat/Tests',
  component: InputWithDisplayFormat,
  tags: ['!autodocs', '!manifest'],
  render: function Render({ label, ...args }: InputWithDisplayFormatProps & FieldProps) {
    return (
      <Field label={label} id={args.id}>
        <InputWithDisplayFormat id={args.id} {...args} />
      </Field>
    );
  },
};
export default meta;

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

export const SecurityPinPlay: Story = {
  args: {
    label: 'Security Pin Play',
    placeholder: '*-*-*-*-*-*',
    displayPattern: '*-*-*-*-*-*',
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.type(canvas.getByPlaceholderText('*-*-*-*-*-*'), '123456');
  },
};