import * as React from "react";
import { action } from "@storybook/addon-actions";
// import { withKnobs, text, boolean, select } from "@storybook/addon-knobs";
import { InlineControls, InlineControlButton } from "./";

import RichEditor from "./RichEditor";

export default {
  title: "Modules|Editor/RichEditor",
  component: RichEditor,
  subcomponents: { InlineControls, InlineControlButton },
};

export const Default: any = () => (
  <div style={{ padding: 100 }}>
    <RichEditor>
      <span onClick={() => action("Clicked")}>This is an action!</span>
    </RichEditor>
  </div>
);

Default.story = {
  parameters: {
    jest: ["RichEditor"],
  },
};

export const InlineControlsComponent: any = () => (
  <InlineControls>
    <span onClick={() => action("Clicked")}>This is an action!</span>
  </InlineControls>
);

InlineControlsComponent.story = {
  parameters: {
    jest: ["InlineControls/InlineControls.test.ts"],
  },
};

export const InlineControlButtonComponent: any = () => (
  <InlineControlButton>
    <span onClick={() => action("Clicked")}>This is an action!</span>
  </InlineControlButton>
);

InlineControlButtonComponent.story = {
  parameters: {
    jest: ["InlineControlButton/InlineControlButton.test.ts"],
  },
};