import React from "react";
import { storiesOf } from "@storybook/react";
import Button from "@src/components/UI/Button";
import Provider from "@src/components/Context/Provider";
import Modal from "./XDKModal";

// eslint-disable-next-line
storiesOf("Components|Overlays/XDKModal", module).add("Documentation", () => {
  const [value, setValue] = React.useState(false);
  return (
    <Provider>
      <Button onClick={() => setValue(true)} themed>
        {" "}
        Open Modal{" "}
      </Button>
      <Modal
        themed
        onClose={() => setValue(false)}
        active={value}
        header={
          <div style={{ fontWeight: 600, fontSize: "18px" }}>
            Themed XDK Modal
          </div>
        }
        footer={
          <div style={{ marginLeft: "auto" }}>
            <Button themed onClick={console.log("Save Button Clicked")}>
              Save
            </Button>
          </div>
        }
      >
        <div>This is a themed XDK modal</div>
      </Modal>
    </Provider>
  );
});
