import React from 'react';
import { useSlate } from 'slate-react';
import { includes } from 'lodash';
import { isBlockActive, smartInsertThematicBreak } from './lib/actions';
import { toggleBlockquote } from './lib/blockquotes';
import { MarkButton, BlockButton, ToolbarButton } from './ToolbarButton';
import { TOOLBAR_ITEMS } from './lib/options';

const Toolbar = () => {
  const editor = useSlate();
  const {
    disallowedTypes
  } = editor;
  const filteredItems = TOOLBAR_ITEMS.filter(item => !disallowedTypes.includes(item));
  return /*#__PURE__*/React.createElement("div", {
    className: "rich-text__toolbar"
  }, includes(filteredItems, 'bold') && /*#__PURE__*/React.createElement(MarkButton, {
    format: "bold",
    icon: "bold",
    tooltip: "Bold"
  }), includes(filteredItems, 'italic') && /*#__PURE__*/React.createElement(MarkButton, {
    format: "italic",
    icon: "italic",
    tooltip: "Italic"
  }), includes(filteredItems, 'headings') && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "toolbar-spacer"
  }), /*#__PURE__*/React.createElement(BlockButton, {
    format: "heading_one",
    icon: "h1",
    tooltip: "Heading One"
  }), /*#__PURE__*/React.createElement(BlockButton, {
    format: "heading_two",
    icon: "h2",
    tooltip: "Heading Two"
  }), /*#__PURE__*/React.createElement(BlockButton, {
    format: "heading_three",
    icon: "h3",
    tooltip: "Heading Three"
  }), /*#__PURE__*/React.createElement(BlockButton, {
    format: "heading_four",
    icon: "h4",
    tooltip: "Heading Four"
  })), includes(filteredItems, 'quote') && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "toolbar-spacer"
  }), /*#__PURE__*/React.createElement(ToolbarButton, {
    icon: "quote",
    tooltip: "Quote",
    isActive: isBlockActive(editor, 'block_quote'),
    action: () => toggleBlockquote(editor)
  })), includes(filteredItems, 'lists') && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "toolbar-spacer"
  }), /*#__PURE__*/React.createElement(BlockButton, {
    format: "ol_list",
    icon: "ol",
    tooltip: "Numbered List"
  }), /*#__PURE__*/React.createElement(BlockButton, {
    format: "ul_list",
    icon: "ul",
    tooltip: "Bulleted List"
  })), includes(filteredItems, 'thematic_break') && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "toolbar-spacer"
  }), /*#__PURE__*/React.createElement(ToolbarButton, {
    action: () => smartInsertThematicBreak(editor),
    icon: "hr",
    tooltip: "Thematic Break"
  })), includes(filteredItems, 'history') && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "toolbar-spacer"
  }), /*#__PURE__*/React.createElement(ToolbarButton, {
    icon: "undo",
    tooltip: "Undo",
    action: editor.undo
  }), /*#__PURE__*/React.createElement(ToolbarButton, {
    icon: "redo",
    tooltip: "Redo",
    action: editor.redo
  })));
};

export default Toolbar;