import React from 'react';
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';
  toolList?: Array<ToolListItem>;
  injectControlsToolBar?: any;
  toolBarContainerStyle?: any;
  appendToolBtn?: any;
}

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


  if (toolAlign === 'inner') {
    return (
      <BarftEditorPage
        value={value}
        onChange={onChange}
        controls={[]}
        FloatControls={({ editorState, setEditorState }: any) => (
          <ControlsToolBar
            editorState={editorState}
            setEditorState={setEditorState}
            toolList={toolList}
          />)
        }
      />
    )
  }

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

export default SimpleEditor;