import { Meta, StoryObj } from '@storybook/react-webpack5';
import { userEvent, within } from 'storybook/test';
import { lorem10 } from '../test-utils';
import Info, { InfoPresentation } from '.';
import { withVariantConfig } from '../../.storybook/helpers';

const meta: Meta<typeof Info> = {
  component: Info,
  tags: ['!autodocs', '!manifest'],
  title: 'Dialogs/Info/Tests',
  args: {
    'aria-label': 'Click here for more details',
    title: 'Fast transfer hint',
    content: lorem10,
  },
  render: (args) => (
    <p>
      <span>Fast transfer</span> <Info {...args} />
    </p>
  ),
};
export default meta;

type Story = StoryObj<typeof meta>;

export const OpenedPopover: Story = {
  parameters: {
    chromatic: {
      delay: 1000,
    },
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.click(canvas.getByRole('button'));
  },
};

export const OpenedPopoverMobile: Story = {
  ...OpenedPopover,
  ...withVariantConfig(['mobile'], OpenedPopover),
};

export const OpenedModal: Story = {
  ...OpenedPopover,
  args: {
    presentation: InfoPresentation.MODAL,
  },
};

export const OpenedModalMobile: Story = {
  ...OpenedModal,
  ...withVariantConfig(['mobile'], OpenedModal),
};