import { storiesOf } from "@storybook/react";
import { number, select, text, withKnobs } from "@storybook/addon-knobs";
import { withInfo } from "@storybook/addon-info";
import { addReadme } from "storybook-readme";
import React from "react";
import Modal, { ModalCMD } from "@components/Common/Modal";
import { Button } from "antd";

const stories = storiesOf("Common", module);
stories.addDecorator(storyFn => (
  <div style={{ padding: "0px 40px" }}>{storyFn()}</div>
));
stories.addDecorator(withKnobs);
stories.addDecorator(withInfo);
stories.addDecorator(addReadme);

stories.add(
  "Modal",
  () => {
    const [vis, setVis] = React.useState(false);
    return (
      <div>
        <Button onClick={() => setVis(true)}>Modal</Button>
        <Modal visible={vis} onCancel={() => setVis(false)}>
          NormalModal
        </Modal>
        <Button
          onClick={() =>
            ModalCMD.show({
              children: <div>Hide</div>
            })
          }
        >
          ModalCMD.show
        </Button>
      </div>
    );
  },
  {
    info: { inline: true },
    notes: "A very simple example of addon notes"
  }
);