import { createStyles, IconButton, makeStyles, Tooltip } from '@material-ui/core';
import CodeIcon from '@material-ui/icons/Code';
import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify';
import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft';
import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
import FormatClearIcon from '@material-ui/icons/FormatClear';
import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered';
import FormatQuoteIcon from '@material-ui/icons/FormatQuote';
import FormatUnderlinedIcon from '@material-ui/icons/FormatUnderlined';
import RedoIcon from '@material-ui/icons/Redo';
import UndoIcon from '@material-ui/icons/Undo';
import React from 'react';
import { useLocalization } from "../hooks/index.js";
import { getCommonStyles } from "../styles.js";
import { ImageControl, LinkControl, TableControl, TypographyControl } from "./controls/index.js";
const useStyles = makeStyles(theme => {
  const commonStyles = getCommonStyles(theme);
  return 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
    }
  });
});
export const MenuBar = _ref => {
  let {
    editor
  } = _ref;
  const classes = useStyles();
  const localization = useLocalization();

  if (!editor) {
    return null;
  }

  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/React.createElement(TypographyControl, {
    editor: editor
  }), /*#__PURE__*/React.createElement("div", {
    className: classes.divider
  }), /*#__PURE__*/React.createElement(Tooltip, {
    title: `${localization.menubar.bold} (Ctrl + B)`
  }, /*#__PURE__*/React.createElement(IconButton, {
    onClick: () => editor.chain().focus().toggleBold().run(),
    color: editor.isActive('bold') ? 'primary' : 'default',
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/React.createElement("strong", null, "B"))), /*#__PURE__*/React.createElement(Tooltip, {
    title: `${localization.menubar.italic} (Ctrl + I)`
  }, /*#__PURE__*/React.createElement(IconButton, {
    onClick: () => editor.chain().focus().toggleItalic().run(),
    color: editor.isActive('italic') ? 'primary' : 'default',
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/React.createElement("em", null, "I"))), /*#__PURE__*/React.createElement(Tooltip, {
    title: `${localization.menubar.underline} (Ctrl + U)`
  }, /*#__PURE__*/React.createElement(IconButton, {
    onClick: () => editor.chain().focus().toggleUnderline().run(),
    color: editor.isActive('underline') ? 'primary' : 'default',
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/React.createElement(FormatUnderlinedIcon, null))), /*#__PURE__*/React.createElement("div", {
    className: classes.divider
  }), /*#__PURE__*/React.createElement(Tooltip, {
    title: `${localization.menubar.blockquote} (Ctrl + Shift + B)`
  }, /*#__PURE__*/React.createElement(IconButton, {
    onClick: () => editor.chain().focus().toggleBlockquote().run(),
    color: editor.isActive('blockquote') ? 'primary' : 'default',
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/React.createElement(FormatQuoteIcon, null))), /*#__PURE__*/React.createElement(Tooltip, {
    title: `${localization.menubar.code} (Ctrl + E)`
  }, /*#__PURE__*/React.createElement(IconButton, {
    onClick: () => editor.chain().focus().toggleCode().run(),
    color: editor.isActive('code') ? 'primary' : 'default',
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/React.createElement(CodeIcon, null))), /*#__PURE__*/React.createElement("div", {
    className: classes.divider
  }), /*#__PURE__*/React.createElement(Tooltip, {
    title: `${localization.menubar.alignLeft} (Ctrl + Shift + L)`
  }, /*#__PURE__*/React.createElement(IconButton, {
    onClick: () => editor.chain().focus().setTextAlign('left').run(),
    color: editor.isActive({
      textAlign: 'left'
    }) ? 'primary' : 'default',
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/React.createElement(FormatAlignLeftIcon, null))), /*#__PURE__*/React.createElement(Tooltip, {
    title: `${localization.menubar.alignCenter} (Ctrl + Shift + E)`
  }, /*#__PURE__*/React.createElement(IconButton, {
    onClick: () => {
      editor.chain().focus().setTextAlign('center').run();
    },
    color: editor.isActive({
      textAlign: 'center'
    }) ? 'primary' : 'default',
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/React.createElement(FormatAlignCenterIcon, null))), /*#__PURE__*/React.createElement(Tooltip, {
    title: `${localization.menubar.alignRight} (Ctrl + Shift + R)`
  }, /*#__PURE__*/React.createElement(IconButton, {
    onClick: () => editor.chain().focus().setTextAlign('right').run(),
    color: editor.isActive({
      textAlign: 'right'
    }) ? 'primary' : 'default',
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/React.createElement(FormatAlignRightIcon, null))), /*#__PURE__*/React.createElement(Tooltip, {
    title: `${localization.menubar.alignJustify} (Ctrl + Shift + J)`
  }, /*#__PURE__*/React.createElement(IconButton, {
    onClick: () => editor.chain().focus().setTextAlign('justify').run(),
    color: editor.isActive({
      textAlign: 'justify'
    }) ? 'primary' : 'default',
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/React.createElement(FormatAlignJustifyIcon, null))), /*#__PURE__*/React.createElement("div", {
    className: classes.divider
  }), /*#__PURE__*/React.createElement(Tooltip, {
    title: localization.menubar.bulletList
  }, /*#__PURE__*/React.createElement(IconButton, {
    onClick: () => editor.chain().focus().toggleBulletList().run(),
    className: editor.isActive('bulletList') ? 'is-active' : '',
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/React.createElement(FormatListBulletedIcon, null))), /*#__PURE__*/React.createElement(Tooltip, {
    title: localization.menubar.orderedList
  }, /*#__PURE__*/React.createElement(IconButton, {
    onClick: () => editor.chain().focus().toggleOrderedList().run(),
    color: editor.isActive('orderedList') ? 'primary' : 'default',
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/React.createElement(FormatListNumberedIcon, null))), /*#__PURE__*/React.createElement(LinkControl, {
    editor: editor,
    buttonProps: {
      classes: {
        root: classes.button,
        colorPrimary: classes.buttonPrimary
      }
    }
  }), /*#__PURE__*/React.createElement(ImageControl, {
    editor: editor,
    buttonProps: {
      classes: {
        root: classes.button,
        colorPrimary: classes.buttonPrimary
      }
    }
  }), /*#__PURE__*/React.createElement(TableControl, {
    editor: editor,
    buttonProps: {
      classes: {
        root: classes.button,
        colorPrimary: classes.buttonPrimary
      }
    }
  }), /*#__PURE__*/React.createElement(Tooltip, {
    title: localization.menubar.clearFormat
  }, /*#__PURE__*/React.createElement(IconButton, {
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    },
    onClick: () => {
      editor.chain().focus().unsetAllMarks().run();
      editor.chain().focus().clearNodes().run();
    }
  }, /*#__PURE__*/React.createElement(FormatClearIcon, null))), /*#__PURE__*/React.createElement(Tooltip, {
    title: `${localization.menubar.undo} (Ctrl + Z)`
  }, /*#__PURE__*/React.createElement(IconButton, {
    onClick: () => editor.chain().focus().undo().run(),
    disabled: !editor.can().undo(),
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/React.createElement(UndoIcon, null))), /*#__PURE__*/React.createElement(Tooltip, {
    title: `${localization.menubar.redo} (Ctrl + Y)`
  }, /*#__PURE__*/React.createElement(IconButton, {
    onClick: () => editor.chain().focus().redo().run(),
    disabled: !editor.can().redo(),
    classes: {
      root: classes.button,
      colorPrimary: classes.buttonPrimary
    }
  }, /*#__PURE__*/React.createElement(RedoIcon, null))));
};
//# sourceMappingURL=menu-bar.js.map