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' | '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 (
      <BarftEditorPage
        value={value}
        onChange={onChange}
        controls={[]}
        FloatControls={({ editorState, setEditorState }: any) => (
          <ControlsToolBar
            editorState={editorState}
            setEditorState={setEditorState}
            toolList={toolList}
            {...injectControlsToolBar}
          />)
        }
        {...injectBraftEditorProps}
      />
    )
  }

  if (toolAlign === 'both') {
    return (
      <div>
        <BarftEditorPage
          value={value}
          onChange={onChange}
          controls={[]}
          FloatControls={() => appendInnderBar}
          {...injectBraftEditorProps}
        />
        <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;