"use strict";

exports.__esModule = true;
exports.default = void 0;

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

var _ToolbarButton = _interopRequireDefault(require("./ToolbarButton"));

var _utils = require("../utils");

var _material = require("@mui/material");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

const STYLE_TYPES = [{
  label: 'H2',
  name: 'title',
  style: 'header-two',
  icon: /*#__PURE__*/_react.default.createElement(_material.Icon, null, "title"),
  type: 'block'
}, {
  label: 'Bold',
  name: 'bold',
  style: 'BOLD',
  icon: /*#__PURE__*/_react.default.createElement(_material.Icon, null, "format_bold"),
  type: 'inline'
}, {
  label: 'Italic',
  name: 'italic',
  style: 'ITALIC',
  icon: /*#__PURE__*/_react.default.createElement(_material.Icon, null, "format_italic"),
  type: 'inline'
}, {
  label: 'Underline',
  name: 'underline',
  style: 'UNDERLINE',
  icon: /*#__PURE__*/_react.default.createElement(_material.Icon, null, "format_underline"),
  type: 'inline'
}, {
  label: 'Strikethrough',
  name: 'strikethrough',
  style: 'STRIKETHROUGH',
  icon: /*#__PURE__*/_react.default.createElement(_material.Icon, null, "format_strikethrough"),
  type: 'inline'
}, {
  label: 'Highlight',
  name: 'highlight',
  style: 'HIGHLIGHT',
  icon: /*#__PURE__*/_react.default.createElement(_material.Icon, null, "highlight"),
  type: 'inline'
}, {
  label: 'Undo',
  name: 'undo',
  style: 'UNDO',
  icon: /*#__PURE__*/_react.default.createElement(_material.Icon, null, "undo"),
  type: 'callback'
}, {
  label: 'Redo',
  name: 'redo',
  style: 'REDO',
  icon: /*#__PURE__*/_react.default.createElement(_material.Icon, null, "redo"),
  type: 'callback'
}, {
  label: 'Link',
  name: 'link',
  style: 'LINK',
  icon: /*#__PURE__*/_react.default.createElement(_material.Icon, null, "insert_link"),
  type: 'callback',
  id: 'link-control'
}, {
  label: 'Media',
  name: 'media',
  style: 'IMAGE',
  icon: /*#__PURE__*/_react.default.createElement(_material.Icon, null, "photo"),
  type: 'callback',
  id: 'media-control'
}, {
  label: 'UL',
  name: 'bulletList',
  style: 'unordered-list-item',
  icon: /*#__PURE__*/_react.default.createElement(_material.Icon, null, "format_list_bulleted"),
  type: 'block'
}, {
  label: 'OL',
  name: 'numberList',
  style: 'ordered-list-item',
  icon: /*#__PURE__*/_react.default.createElement(_material.Icon, null, "format_list_numbered"),
  type: 'block'
}, {
  label: 'Blockquote',
  name: 'quote',
  style: 'blockquote',
  icon: /*#__PURE__*/_react.default.createElement(_material.Icon, null, "format_quote"),
  type: 'block'
}, {
  label: 'Code Block',
  name: 'code',
  style: 'code-block',
  icon: /*#__PURE__*/_react.default.createElement(_material.Icon, null, "code"),
  type: 'block'
}, {
  label: 'Clear',
  name: 'clear',
  style: 'clear',
  icon: /*#__PURE__*/_react.default.createElement(_material.Icon, null, "format_clear"),
  type: 'callback'
}, {
  label: 'Save',
  name: 'save',
  style: 'save',
  icon: /*#__PURE__*/_react.default.createElement(_material.Icon, null, "save"),
  type: 'callback'
}];

const Toolbar = props => {
  const [availableControls, setAvailableControls] = (0, _react.useState)(props.controls ? [] : STYLE_TYPES);
  const {
    editorState
  } = props;
  const id = props.inlineMode ? '-inline-toolbar' : '-toolbar';
  (0, _react.useEffect)(() => {
    if (!props.controls) {
      return;
    }

    const filteredControls = [];
    const controls = props.controls.filter((control, index) => props.controls.indexOf(control) >= index);
    controls.forEach(name => {
      const style = STYLE_TYPES.find(style => style.name === name);

      if (style) {
        filteredControls.push(style);
      } else if (props.customControls) {
        const customControl = props.customControls.find(style => style.name === name);

        if (customControl && customControl.type !== 'atomic' && (customControl.icon || customControl.component)) {
          filteredControls.push({
            id: customControl.id || customControl.name + 'Id',
            name: customControl.name,
            label: customControl.name,
            style: customControl.name.toUpperCase(),
            icon: customControl.icon,
            component: customControl.component,
            type: customControl.type,
            clickFnName: 'onCustomClick'
          });
        }
      }
    });
    setAvailableControls(filteredControls);
  }, [props.controls, props.customControls]);
  return /*#__PURE__*/_react.default.createElement("div", {
    id: `${props.id}${id}`,
    className: props.className
  }, availableControls.map(style => {
    if (props.inlineMode && style.type !== 'inline' && style.name !== 'link' && style.name !== 'clear') {
      return null;
    }

    let active = false;
    const action = props.onClick;

    if (!props.isActive) {
      active = false;
    } else if (style.type === 'inline') {
      active = editorState.getCurrentInlineStyle().has(style.style);
    } else if (style.type === 'block') {
      const selection = editorState.getSelection();
      const block = editorState.getCurrentContent().getBlockForKey(selection.getStartKey());

      if (block) {
        active = style.style === block.getType();
      }
    } else {
      if (style.style === 'IMAGE' || style.style === 'LINK') {
        active = style.style === (0, _utils.getSelectionInfo)(editorState).entityType;
      }
    }

    return /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
      id: style.id,
      editorId: props.id,
      key: `key-${style.label}`,
      active: active,
      label: style.label,
      onClick: action,
      style: style.style,
      type: style.type,
      icon: style.icon,
      component: style.component,
      inlineMode: props.inlineMode,
      disabled: props.disabled,
      size: props.size
    });
  }));
};

var _default = Toolbar;
exports.default = _default;