import React from "react";
import { action } from "@storybook/addon-actions";
import { Button } from "@storybook/react/demo";

export default {
  title: "Button",
  excludeStories: ["text"],
  includeStories: /emoji.*/
};

export const Basic = () => (
  <Button onClick={action("clicked")}>Hello Button</Button>
);

export const WithParams = () => <Button>WithParams</Button>;
WithParams.parameters = { foo: 'bar' }

export const WithDocsParams = () => <Button>WithDocsParams</Button>;
WithDocsParams.parameters = { docs: { iframeHeight: 200 } };

export const WithStorySourceParams = () => <Button>WithStorySourceParams</Button>;
WithStorySourceParams.parameters = { storySource: { source: 'foo' } };

const Template = (args: Args) => <Button {...args} />;

export const WithTemplate = Template.bind({});
WithTemplate.args = { foo: 'bar' }

export const WithEmptyTemplate = Template.bind();
WithEmptyTemplate.args = { foo: 'baz' };

export const WithAddFunctionParameters = () => null
WithAddFunctionParameters.parameters = {
  foobar: () => {
    document.addEventListener('foo', () => console.log('bar'))
  },
}