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

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

export default {
  component: TextareaWithDisplayFormat,
  title: 'Forms/TextareaWithDisplayFormat',
};

type Story = StoryObj<typeof TextareaWithDisplayFormat>;

export const Basic: Story = {
  render: () => {
    const label = 'Textarea with display format';
    const id = label.replaceAll(' ', '-').toLowerCase();

    return (
      <Field id={id} label={label}>
        <TextareaWithDisplayFormat
          id={id}
          value="0000"
          displayPattern="**** - **** - ****"
          onChange={console.log}
        />
      </Field>
    );
  },
  // intentionally use interactive typing (over init value via `value` prop)
  // to trigger event handlers in the component
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.type(canvas.getByRole('textbox'), '111122223333', {
      initialSelectionStart: Number.MAX_SAFE_INTEGER,
    });
  },
};