"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.ToolbarButton = exports.DefaultToolbar = void 0;

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

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

var _doneButton = require("./done-button");

var _propTypes = _interopRequireDefault(require("prop-types"));

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

var _slatePropTypes = _interopRequireDefault(require("slate-prop-types"));

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

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

var _toolbarButtons = require("./toolbar-buttons");

var _debug = _interopRequireDefault(require("debug"));

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var log = (0, _debug["default"])('@pie-lib:editable-html:plugins:toolbar');

var ToolbarButton = function ToolbarButton(props) {
  var onToggle = function onToggle() {
    var c = props.onToggle(props.value.change(), props);
    props.onChange(c);
  };

  if (props.isMark) {
    var _isActive = (0, _utils.hasMark)(props.value, props.type);

    var fnToCall = props.type === 'css' ? function () {
      return props.onClick(props.value, props.onChange, props.getFocusedValue);
    } : onToggle;
    log('[ToolbarButton] mark:isActive: ', _isActive);
    var ariaLabel;

    if (props.type === 'sup') {
      ariaLabel = 'Superscript (marks text as superscripted)';
    } else if (props.type === 'sub') {
      ariaLabel = 'Subscript (marks text as subscripted)';
    } else {
      ariaLabel = props.type;
    }

    return /*#__PURE__*/_react["default"].createElement(_toolbarButtons.MarkButton, {
      active: _isActive,
      onToggle: fnToCall,
      mark: props.type,
      label: ariaLabel
    }, props.icon);
  }

  var disabled = props.disabled;
  var isActive = props.isActive ? props.isActive(props.value, props.type) : (0, _utils.hasBlock)(props.value, props.type);
  log('[ToolbarButton] block:isActive: ', isActive);

  var newIcon = /*#__PURE__*/_react["default"].cloneElement(props.icon);

  return /*#__PURE__*/_react["default"].createElement(_toolbarButtons.Button, {
    ariaLabel: props.ariaLabel,
    active: isActive,
    disabled: disabled,
    onClick: function onClick(event) {
      return props.onClick(props.value, props.onChange, props.getFocusedValue, event);
    },
    extraStyles: props.buttonStyles
  }, newIcon);
};

exports.ToolbarButton = ToolbarButton;
ToolbarButton.propTypes = {
  buttonStyles: _propTypes["default"].object,
  disabled: _propTypes["default"].bool,
  icon: _propTypes["default"].any,
  isActive: _propTypes["default"].bool,
  isMark: _propTypes["default"].bool,
  getFocusedValue: _propTypes["default"].func,
  onToggle: _propTypes["default"].func,
  onChange: _propTypes["default"].func,
  onClick: _propTypes["default"].func,
  type: _propTypes["default"].string,
  value: _propTypes["default"].object,
  ariaLabel: _propTypes["default"].string
};

var isActiveToolbarPlugin = function isActiveToolbarPlugin(props) {
  return function (plugin) {
    var isDisabled = (props[plugin.name] || {}).disabled;
    return plugin && plugin.toolbar && !isDisabled;
  };
};

var DefaultToolbar = function DefaultToolbar(_ref) {
  var plugins = _ref.plugins,
      pluginProps = _ref.pluginProps,
      value = _ref.value,
      onChange = _ref.onChange,
      getFocusedValue = _ref.getFocusedValue,
      onDone = _ref.onDone,
      classes = _ref.classes,
      showDone = _ref.showDone,
      deletable = _ref.deletable,
      isHtmlMode = _ref.isHtmlMode,
      doneButtonRef = _ref.doneButtonRef,
      onBlur = _ref.onBlur,
      onFocus = _ref.onFocus;
  pluginProps = _objectSpread({
    // disable HTML plugin by default, at least for now
    html: {
      disabled: true
    }
  }, pluginProps);
  var filtered;

  var handleFocus = function handleFocus(event) {
    var _doneButtonRef$curren, _event$target;

    var doneButtonClassName = doneButtonRef === null || doneButtonRef === void 0 ? void 0 : (_doneButtonRef$curren = doneButtonRef.current) === null || _doneButtonRef$curren === void 0 ? void 0 : _doneButtonRef$curren.className;
    var isRawDoneButton = doneButtonClassName && ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.closest("[class*=\"".concat(doneButtonClassName, "\"]")));

    if (onFocus && !isRawDoneButton) {
      onFocus(event);
    }
  };

  if (isHtmlMode) {
    filtered = plugins.filter(function (plugin) {
      return isActiveToolbarPlugin(pluginProps)(plugin) && (plugin.name === 'characters' || plugin.name === 'html');
    }).map(function (p) {
      return p.toolbar;
    });
  } else {
    filtered = plugins.filter(isActiveToolbarPlugin(pluginProps)).map(function (p) {
      return p.toolbar;
    });
  }

  var isListActive = plugins.some(function (plugin) {
    return isActiveToolbarPlugin(pluginProps)(plugin) && ['ul_list', 'ol_list'].includes(plugin.name) && plugin.toolbar.isActive(value, plugin.name);
  });
  var isTableActive = plugins.some(function (plugin) {
    return isActiveToolbarPlugin(pluginProps)(plugin) && plugin.name === 'table' && plugin.utils && plugin.utils.isSelectionInTable && plugin.utils.isSelectionInTable(value);
  });

  var isToolbarButtonDisabled = function isToolbarButtonDisabled(plugin) {
    if (plugin.type === 'table') {
      return isListActive;
    } else if (plugin.type === 'ul_list' || plugin.type === 'ol_list') {
      return isTableActive;
    }

    return plugin.disabled;
  };

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.defaultToolbar,
    onFocus: handleFocus,
    tabIndex: "1",
    onBlur: onBlur
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.buttonsContainer
  }, filtered.map(function (p, index) {
    return /*#__PURE__*/_react["default"].createElement(ToolbarButton, (0, _extends2["default"])({}, p, {
      key: index,
      value: value,
      onChange: onChange,
      getFocusedValue: getFocusedValue,
      disabled: isToolbarButtonDisabled(p)
    }));
  })), showDone && !deletable && /*#__PURE__*/_react["default"].createElement(_doneButton.DoneButton, {
    doneButtonRef: doneButtonRef,
    onClick: onDone
  }));
};

exports.DefaultToolbar = DefaultToolbar;
DefaultToolbar.propTypes = {
  classes: _propTypes["default"].object.isRequired,
  plugins: _propTypes["default"].array.isRequired,
  pluginProps: _propTypes["default"].object,
  value: _slatePropTypes["default"].value.isRequired,
  onChange: _propTypes["default"].func.isRequired,
  getFocusedValue: _propTypes["default"].func.isRequired,
  onDone: _propTypes["default"].func.isRequired,
  showDone: _propTypes["default"].bool,
  addArea: _propTypes["default"].bool,
  deletable: _propTypes["default"].bool,
  isHtmlMode: _propTypes["default"].bool,
  doneButtonRef: _propTypes["default"].func,
  onBlur: _propTypes["default"].func,
  onFocus: _propTypes["default"].func
};
DefaultToolbar.defaultProps = {
  pluginProps: {}
};

var toolbarStyles = function toolbarStyles() {
  return {
    defaultToolbar: {
      display: 'flex',
      width: '100%',
      justifyContent: 'space-between'
    },
    buttonsContainer: {
      alignItems: 'center',
      display: 'flex',
      width: '100%'
    }
  };
};

var _default = (0, _styles.withStyles)(toolbarStyles)(DefaultToolbar);

exports["default"] = _default;
//# sourceMappingURL=default-toolbar.js.map