import React from "react";
import classnames from "classnames";
import {
  BarftEditorPage,
  BaseEditorProps,
} from "@components/Editor/BraftEditor";
import {
  ControlsToolBar,
  ToolListItem,
} from "@components/Editor/CommonTool/ControlsToolBar";
import { ContentUtils } from "braft-utils";
import styles from "./index.less";

interface SimpleEditorProps extends BaseEditorProps {
  toolAlign?: "inner" | "bottom" | "both";
  toolList?: Array<ToolListItem>;
  injectControlsToolBar?: any;
  injectBraftEditorProps?: any;
  toolBarContainerStyle?: any;
  appendToolBtn?: any;
  appendInnderBar?: any;
}

const SimpleEditor = (props: SimpleEditorProps) => {
  const {
    value,
    onChange,
    toolAlign = "inner",
    toolList = [],
    injectControlsToolBar = {},
    toolBarContainerStyle = {},
    injectBraftEditorProps = {},
    appendToolBtn = null,
    appendInnderBar = null,
  } = props;

  if (toolAlign === "inner") {
    return (
      <div className={styles.innerWrapper}>
        <BarftEditorPage
          value={value}
          onChange={onChange}
          controls={[]}
          {...injectBraftEditorProps}
        />
        <div className={classnames(styles.floatControls)}>
          <ControlsToolBar
            editorState={value}
            setEditorState={onChange}
            toolList={toolList}
            {...injectControlsToolBar}
          />
        </div>
      </div>
    );
  }

  if (toolAlign === "both") {
    return (
      <div>
        <div className={styles.innerWrapper}>
          <BarftEditorPage
            value={value}
            onChange={onChange}
            controls={[]}
            {...injectBraftEditorProps}
          />
          <div className={classnames(styles.floatControls)}>
            {appendInnderBar}
          </div>
        </div>
        <div style={toolBarContainerStyle}>
          <div className={styles.bottomToolBarWrapper}>
            <ControlsToolBar
              editorState={value}
              setEditorState={onChange}
              toolList={toolList}
              {...injectControlsToolBar}
            />
          </div>
          {appendToolBtn}
        </div>
      </div>
    );
  }

  return (
    <div>
      <BarftEditorPage
        value={value}
        onChange={onChange}
        controls={[]}
        {...injectBraftEditorProps}
      />
      <div style={toolBarContainerStyle}>
        <div className={styles.bottomToolBarWrapper}>
          <ControlsToolBar
            editorState={value}
            setEditorState={onChange}
            toolList={toolList}
            {...injectControlsToolBar}
          />
        </div>
        {appendToolBtn}
      </div>
    </div>
  );
};

export default SimpleEditor;