import React, { useState } from "react";
import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import { withInfo } from "@storybook/addon-info";
import { withKnobs, number, boolean, select } from "@storybook/addon-knobs";
import { addReadme } from "storybook-readme";

import { BarftEditorPage } from "@components/Editor/BraftEditor";
import { ContentUtils } from "braft-utils";

import EditorData from "./data/articleData.json";
import { Divider, Popover } from "antd";
import BraftEditor from "braft-editor";

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

stories.add(
  "BraftEditor",
  () => {
    return <BarftEditorPage initValue={EditorData.text} />;
  },
  {
    info: {
      inline: true
    },
    notes: "A very simple example of addon notes"
  }
);

stories.add(
  "BraftEditorCommon",
  () => {
    const [editorState, setEditorState] = useState(
      BraftEditor.createEditorState("<p>Hello <b>World!</b></p>")
    );
    return (
      <>
        <h3>非受控组件</h3>
        <BarftEditorPage controls={[]} />
        <Divider />
        <h3>受控组件</h3>
        <BarftEditorPage
          value={editorState}
          onChange={setEditorState}
          controls={["bold"]}
          FloatControls={({ editorState, setEditorState }: any) => {
            const IconWrapStyle = {
              cursor: "pointer",
              textAlign: "center" as const,
              width: "42px"
            };
            const IconStyle = { fontSize: "21px" };
            return (
              <>
                <div
                  style={{ color: "#f07977", ...IconWrapStyle }}
                  onClick={() => {
                    setEditorState(
                      ContentUtils.insertText(editorState, "Hello World")
                    );
                  }}
                >
                  <i
                    className="schedule schedule-icon_story"
                    style={IconStyle}
                  />
                </div>
                <div style={{ ...IconWrapStyle, color: "#3d9bfe" }}>
                  <i
                    className="schedule schedule-icon_topic"
                    style={IconStyle}
                  />
                </div>
                <div style={{ ...IconWrapStyle, color: "#ffa405" }}>
                  <i
                    className="schedule schedule-icon_emoticon"
                    style={IconStyle}
                  />
                </div>
                <div style={{ ...IconWrapStyle, color: "#71c135" }}>
                  <i className="schedule schedule-icon_img" style={IconStyle} />
                </div>
              </>
            );
          }}
        />
      </>
    );
  },
  {
    info: {
      inline: true
    },
    notes: "A very simple example of addon notes"
  }
);