import React from "react";
import { EditorState } from "braft-editor";

export interface ToolListItem {
  key: any;
  color: string;
  iconClass: string;
  onClick: any;
  text?: string;
};
interface ControlsToolBarProps {
  editorState: EditorState;
  setEditorState: any;
  toolList: Array<ToolListItem>;
  injectIconWrapStyle?: any;
  injectIconStyle?: any;
  injectIconTextStyle?: any;
}

export const ControlsToolBar = (props: ControlsToolBarProps) => {
  const {
    editorState,
    setEditorState,
    toolList = [],
    injectIconWrapStyle = {},
    injectIconStyle = {},
    injectIconTextStyle = {},
  } = props;
  const IconWrapStyle = {
    display: 'flex',
    alignItems: 'center',
    cursor: "pointer",
    textAlign: "center" as const,
    minWidth: "42px",
    ...injectIconWrapStyle,
  };
  const IconStyle = { fontSize: "21px", ...injectIconStyle };
  const IconTextStyle = { margin: "0 4px", ...injectIconTextStyle };

  if (toolList.length < 1) {
    return null;
  }

  return (
    <>
    {
      toolList.map(i => (
        <div
          key={`toolList_${i.key}`}
          style={{ color: i.color, ...IconWrapStyle }}
          onClick={i.onClick}
        >
          <i className={i.iconClass} style={IconStyle} />
          {
            i.text ? <span style={IconTextStyle}>{i.text}</span> : null
          }
        </div>
      ))
    }
    </>
  );
};
