import { action } from '@storybook/addon-actions';
import { number } from '@storybook/addon-knobs';
import type { StoryContext } from '@storybook/react';
import { userEvent, within } from '@storybook/test';
import { wait } from '../test-utils/wait';

import Button from '../button';

import { Snackbar } from './Snackbar';
import { SnackbarConsumer } from './SnackbarContext';
import SnackbarProvider from './SnackbarProvider';

export default {
  component: Snackbar,
  title: 'Dialogs/Snackbar',
};

export const Basic = () => {
  return (
    <SnackbarProvider>
      <SnackbarConsumer>
        {({ createSnackbar }) => (
          <Button
            block
            onClick={() => {
              createSnackbar({
                action: {
                  label: 'View',
                  onClick: () => action('View button clicked.'),
                },
                text: <span>Some text</span>,
              });
            }}
          >
            Show Snackbar
          </Button>
        )}
      </SnackbarConsumer>
    </SnackbarProvider>
  );
};

Basic.play = async ({ canvasElement }: StoryContext) => {
  await wait(0);
  const canvas = within(canvasElement);
  await userEvent.click(canvas.getByRole('button'));
};
