import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Button } from './Button';
import { expect } from '@storybook/jest';
import { within, userEvent } from '@storybook/testing-library';

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Components/Button',
  component: Button
} as ComponentMeta<typeof Button>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;

export const PrimaryButton = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
PrimaryButton.args = {
  variant: 'contained',
  color: 'primary',
  label: 'Button'
};
PrimaryButton.play = async ({ args, canvasElement }) => {
  const canvas = within(canvasElement);
  await userEvent.click(canvas.getByRole('button'));
  await expect(args.onClick).toHaveBeenCalled();
};

export const SecondaryButton = Template.bind({});
SecondaryButton.args = {
  variant: 'outlined',
  color: 'primary',
  label: 'Button'
};

export const DisabledButton = Template.bind({});
DisabledButton.args = {
  variant: 'contained',
  disabled: true,
  label: 'Button'
};