"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MenuBar = void 0;

var _core = require("@material-ui/core");

var _Code = _interopRequireDefault(require("@material-ui/icons/Code"));

var _FormatAlignCenter = _interopRequireDefault(require("@material-ui/icons/FormatAlignCenter"));

var _FormatAlignJustify = _interopRequireDefault(require("@material-ui/icons/FormatAlignJustify"));

var _FormatAlignLeft = _interopRequireDefault(require("@material-ui/icons/FormatAlignLeft"));

var _FormatAlignRight = _interopRequireDefault(require("@material-ui/icons/FormatAlignRight"));

var _FormatClear = _interopRequireDefault(require("@material-ui/icons/FormatClear"));

var _FormatListBulleted = _interopRequireDefault(require("@material-ui/icons/FormatListBulleted"));

var _FormatListNumbered = _interopRequireDefault(require("@material-ui/icons/FormatListNumbered"));

var _FormatQuote = _interopRequireDefault(require("@material-ui/icons/FormatQuote"));

var _FormatUnderlined = _interopRequireDefault(require("@material-ui/icons/FormatUnderlined"));

var _Redo = _interopRequireDefault(require("@material-ui/icons/Redo"));

var _Undo = _interopRequireDefault(require("@material-ui/icons/Undo"));

var _react = _interopRequireDefault(require("react"));

var _hooks = require("../hooks");

var _styles = require("../styles");

var _controls = require("./controls");

const useStyles = (0, _core.makeStyles)(theme => {
  const commonStyles = (0, _styles.getCommonStyles)(theme);
  return (0, _core.createStyles)({
    root: {
      position: 'sticky',
      top: '-14px',
      padding: '0.5rem 1rem',
      zIndex: 10,
      borderRadius: commonStyles.editorBorderRadius,
      border: commonStyles.editorBorder,
      backgroundColor: commonStyles.editorBackground
    },
    divider: {
      background: theme.palette.type === 'dark' ? theme.palette.common.white : 'rgba(57,76,96,.15)',
      width: '1px',
      display: 'inline-block',
      height: '28px',
      verticalAlign: 'middle',
      margin: '0 5px'
    },
    button: {
      borderRadius: '5px',
      color: theme.palette.type === 'dark' ? theme.palette.common.white : '#556685',
      fontSize: '1.3rem',
      padding: '4px 8px',
      margin: '0 5px'
    },
    buttonPrimary: {
      backgroundColor: '#E2F3EE',
      color: theme.palette.primary.main
    }
  });
});

const MenuBar = ({
  editor
}) => {
  const classes = useStyles();
  const localization = (0, _hooks.useLocalization)();

  if (!editor) {
    return null;
  }

  return /*#__PURE__*/_react.default.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/_react.default.createElement(_controls.TypographyControl, {
    editor: editor
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: classes.divider
  }), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
    title: `${localization.menubar.bold} (Ctrl + B)`
  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
    onClick: () => editor.chain().focus().toggleBold().run(),
    color: editor.isActive('bold') ? 'primary' : 'default',
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/_react.default.createElement("strong", null, "B"))), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
    title: `${localization.menubar.italic} (Ctrl + I)`
  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
    onClick: () => editor.chain().focus().toggleItalic().run(),
    color: editor.isActive('italic') ? 'primary' : 'default',
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/_react.default.createElement("em", null, "I"))), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
    title: `${localization.menubar.underline} (Ctrl + U)`
  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
    onClick: () => editor.chain().focus().toggleUnderline().run(),
    color: editor.isActive('underline') ? 'primary' : 'default',
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/_react.default.createElement(_FormatUnderlined.default, null))), /*#__PURE__*/_react.default.createElement("div", {
    className: classes.divider
  }), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
    title: `${localization.menubar.blockquote} (Ctrl + Shift + B)`
  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
    onClick: () => editor.chain().focus().toggleBlockquote().run(),
    color: editor.isActive('blockquote') ? 'primary' : 'default',
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/_react.default.createElement(_FormatQuote.default, null))), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
    title: `${localization.menubar.code} (Ctrl + E)`
  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
    onClick: () => editor.chain().focus().toggleCode().run(),
    color: editor.isActive('code') ? 'primary' : 'default',
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/_react.default.createElement(_Code.default, null))), /*#__PURE__*/_react.default.createElement("div", {
    className: classes.divider
  }), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
    title: `${localization.menubar.alignLeft} (Ctrl + Shift + L)`
  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
    onClick: () => editor.chain().focus().setTextAlign('left').run(),
    color: editor.isActive({
      textAlign: 'left'
    }) ? 'primary' : 'default',
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/_react.default.createElement(_FormatAlignLeft.default, null))), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
    title: `${localization.menubar.alignCenter} (Ctrl + Shift + E)`
  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
    onClick: () => {
      editor.chain().focus().setTextAlign('center').run();
    },
    color: editor.isActive({
      textAlign: 'center'
    }) ? 'primary' : 'default',
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/_react.default.createElement(_FormatAlignCenter.default, null))), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
    title: `${localization.menubar.alignRight} (Ctrl + Shift + R)`
  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
    onClick: () => editor.chain().focus().setTextAlign('right').run(),
    color: editor.isActive({
      textAlign: 'right'
    }) ? 'primary' : 'default',
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/_react.default.createElement(_FormatAlignRight.default, null))), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
    title: `${localization.menubar.alignJustify} (Ctrl + Shift + J)`
  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
    onClick: () => editor.chain().focus().setTextAlign('justify').run(),
    color: editor.isActive({
      textAlign: 'justify'
    }) ? 'primary' : 'default',
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/_react.default.createElement(_FormatAlignJustify.default, null))), /*#__PURE__*/_react.default.createElement("div", {
    className: classes.divider
  }), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
    title: localization.menubar.bulletList
  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
    onClick: () => editor.chain().focus().toggleBulletList().run(),
    className: editor.isActive('bulletList') ? 'is-active' : '',
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/_react.default.createElement(_FormatListBulleted.default, null))), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
    title: localization.menubar.orderedList
  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
    onClick: () => editor.chain().focus().toggleOrderedList().run(),
    color: editor.isActive('orderedList') ? 'primary' : 'default',
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/_react.default.createElement(_FormatListNumbered.default, null))), /*#__PURE__*/_react.default.createElement(_controls.LinkControl, {
    editor: editor,
    buttonProps: {
      classes: {
        root: classes.button,
        colorPrimary: classes.buttonPrimary
      }
    }
  }), /*#__PURE__*/_react.default.createElement(_controls.ImageControl, {
    editor: editor,
    buttonProps: {
      classes: {
        root: classes.button,
        colorPrimary: classes.buttonPrimary
      }
    }
  }), /*#__PURE__*/_react.default.createElement(_controls.TableControl, {
    editor: editor,
    buttonProps: {
      classes: {
        root: classes.button,
        colorPrimary: classes.buttonPrimary
      }
    }
  }), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
    title: localization.menubar.clearFormat
  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    },
    onClick: () => {
      editor.chain().focus().unsetAllMarks().run();
      editor.chain().focus().clearNodes().run();
    }
  }, /*#__PURE__*/_react.default.createElement(_FormatClear.default, null))), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
    title: `${localization.menubar.undo} (Ctrl + Z)`
  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
    onClick: () => editor.chain().focus().undo().run(),
    disabled: !editor.can().undo(),
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/_react.default.createElement(_Undo.default, null))), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
    title: `${localization.menubar.redo} (Ctrl + Y)`
  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
    onClick: () => editor.chain().focus().redo().run(),
    disabled: !editor.can().redo(),
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/_react.default.createElement(_Redo.default, null))));
};

exports.MenuBar = MenuBar;
//# sourceMappingURL=menu-bar.js.map