import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
import _createClass from '@babel/runtime/helpers/esm/createClass';
import _inherits from '@babel/runtime/helpers/esm/inherits';
import _createSuper from '@babel/runtime/helpers/esm/createSuper';
import { ButtonGroup } from '@uidu/button';
import { gridSize, colors, themed, borderRadius } from '@uidu/theme';
import { Component } from 'react';
import styled from 'styled-components';
import { dH as Button, dI as DropdownWithOuterListeners, dJ as Input, dK as Separator } from './main-d3eb8520.esm.js';
import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
import { ButtonItem } from '@uidu/menu';
import { jsx, jsxs } from 'react/jsx-runtime';
import '@atlaskit/icon/glyph/editor/align-center';
import '@atlaskit/icon/glyph/editor/align-left';
import '@atlaskit/icon/glyph/editor/align-right';
import '@babel/runtime/helpers/objectSpread2';
import 'prosemirror-state';
import '@uidu/adf-schema';
import '@babel/runtime/helpers/toConsumableArray';
import './withAnalytics-08169d70.esm.js';
import './index-5bfbc632.esm.js';
import '@uidu/editor-common';
import '@uidu/editor-json-transformer';
import 'prosemirror-commands';
import 'prosemirror-model';
import 'prosemirror-transform';
import 'prosemirror-utils';
import 'prosemirror-view';
import '@uidu/editor-common/selection';
import '@uidu/adf-utils';
import '@uidu/mentions';
import '@uidu/editor-common/utils';
import '@babel/runtime/helpers/asyncToGenerator';
import '@babel/runtime/regenerator';
import '@babel/runtime/helpers/typeof';
import 'prosemirror-keymap';
import 'prosemirror-history';
import '@uidu/editor-common/safe-plugin';
import './index-f6954716.esm.js';
import 'prosemirror-tables';
import '@babel/runtime/helpers/createForOfIteratorHelper';
import '@uidu/analytics-listeners';
import 'prosemirror-inputrules';
import './ReactNodeView-100b47fb.esm.js';
import '@babel/runtime/helpers/get';
import '@babel/runtime/helpers/getPrototypeOf';
import 'w3c-keyname';
import '@babel/runtime/helpers/slicedToArray';
import '@atlaskit/icon/glyph/editor/text-style';
import 'react-intl';
import '@loadable/component';
import 'prop-types';
import '@uidu/date';
import '@uidu/emoji';
import '@uidu/emoji/element';
import '@atlaskit/icon/glyph/editor/edit';
import '@atlaskit/icon/glyph/editor/media-center';
import '@atlaskit/icon/glyph/editor/media-full-width';
import '@atlaskit/icon/glyph/editor/media-wide';
import '@atlaskit/icon/glyph/editor/remove';
import '@babel/runtime/helpers/objectWithoutProperties';
import '@atlaskit/icon/glyph/editor/file';
import 'raf-schd';
import '@atlaskit/icon/glyph/cross-circle';
import '@atlaskit/icon/glyph/link';
import '@uidu/tooltip';
import '@atlaskit/icon/glyph/editor/layout-three-equal';
import '@atlaskit/icon/glyph/editor/layout-three-with-sidebars';
import '@atlaskit/icon/glyph/editor/layout-two-equal';
import '@atlaskit/icon/glyph/editor/layout-two-left-sidebar';
import '@atlaskit/icon/glyph/editor/layout-two-right-sidebar';
import 'uuid';
import '@uidu/analytics-gas-types';
import '@atlaskit/icon/glyph/editor/mention';
import '@atlaskit/icon/glyph/chevron-right-circle';
import '@atlaskit/icon/glyph/editor/add';
import '@atlaskit/icon/glyph/editor/code';
import '@atlaskit/icon/glyph/editor/date';
import '@atlaskit/icon/glyph/editor/decision';
import '@atlaskit/icon/glyph/editor/emoji';
import '@atlaskit/icon/glyph/editor/horizontal-rule';
import '@atlaskit/icon/glyph/editor/info';
import '@atlaskit/icon/glyph/editor/more';
import '@atlaskit/icon/glyph/editor/task';
import '@atlaskit/icon/glyph/media-services/text';
import '@atlaskit/icon/glyph/quote';
import '@atlaskit/icon/glyph/status';
import '@fortawesome/free-solid-svg-icons';
import '@fortawesome/react-fontawesome';
import '@uidu/emoji/picker';
import 'react-dom';
import '@atlaskit/icon/glyph/editor/bullet-list';
import '@atlaskit/icon/glyph/editor/number-list';
import '@atlaskit/icon/glyph/editor/close';
import '@uidu/media-filmstrip';
import 'classnames';
import '@uidu/media-picker';
import 'assert';
import 'react-dom/client';
import '@atlaskit/icon/glyph/document-filled';
import '@uidu/media-card';
import 're-resizable';
import '@uidu/media-core';
import '@atlaskit/icon/glyph/chevron-left-large';
import '@uidu/analytics';
import '@atlaskit/icon/glyph/media-services/annotate';
import '@atlaskit/icon/glyph/editor/align-image-center';
import '@atlaskit/icon/glyph/editor/align-image-left';
import '@atlaskit/icon/glyph/editor/align-image-right';
import '@atlaskit/icon/glyph/editor/media-wrap-left';
import '@atlaskit/icon/glyph/editor/media-wrap-right';
import '@atlaskit/icon/glyph/editor/link';
import '@atlaskit/icon/glyph/shortcut';
import '@atlaskit/icon/glyph/editor/unlink';
import '@uidu/spinner';
import '@atlaskit/icon/glyph/editor/attachment';
import '@uidu/status/element';
import '@uidu/status/picker';
import '@uidu/editor-common/ui-color';
import '@uidu/droplist';
import '@atlaskit/icon/glyph/editor/collapse';
import '@atlaskit/icon/glyph/editor/expand';
import 'prosemirror-schema-list';
import '@uidu/editor-markdown-transformer';
import 'linkify-it';
import 'markdown-it';
import '@atlaskit/icon/glyph/editor/background-color';
import '@babel/runtime/helpers/toArray';
import '@atlaskit/icon/base';
import 'get-video-id';

var shallowEqual = function shallowEqual(objA, objB) {
  if (objA === objB) {
    return true;
  }
  if (objA == null || objB == null) {
    return false;
  }
  var keysA = Object.keys(objA);
  var keysB = Object.keys(objB);
  if (keysA.length !== keysB.length) {
    return false;
  }
  var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB);
  for (var idx = 0; idx < keysA.length; idx++) {
    var key = keysA[idx];
    if (!bHasOwnProperty(key)) {
      return false;
    }
    if (objA[key] !== objB[key]) {
      return false;
    }
  }
  return true;
};
var compareArrays = function compareArrays(left, right) {
  var compareFn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : shallowEqual;
  if (left.length !== right.length) {
    return false;
  }
  for (var idx = 0; idx < left.length; idx++) {
    if (!compareFn(left[idx], right[idx])) {
      return false;
    }
  }
  return true;
};

var menuItemDimensions = {
  width: 175,
  height: 32
};
var Spacer = styled.span.withConfig({
  displayName: "DropdownMenu__Spacer",
  componentId: "sc-zndc0s-0"
})(["display:flex;flex:1;padding:8px;"]);
var MenuContainer = styled.div.withConfig({
  displayName: "DropdownMenu__MenuContainer",
  componentId: "sc-zndc0s-1"
})(["min-width:", "px;"], menuItemDimensions.width);
var itemSpacing = gridSize() / 2;
var Dropdown$1 = /*#__PURE__*/function (_Component) {
  _inherits(Dropdown, _Component);
  var _super = _createSuper(Dropdown);
  function Dropdown() {
    _classCallCheck(this, Dropdown);
    return _super.apply(this, arguments);
  }
  _createClass(Dropdown, [{
    key: "render",
    value: function render() {
      var _this = this;
      var _this$props = this.props,
        hide = _this$props.hide,
        dispatchCommand = _this$props.dispatchCommand,
        items = _this$props.items;
      return /*#__PURE__*/jsx(MenuContainer, {
        children: items.filter(function (item) {
          return !item.hidden;
        }).map(function (item, idx) {
          return /*#__PURE__*/jsx(ButtonItem, {
            isCompact: true,
            iconBefore: _this.renderSelected(item),
            onClick: function onClick() {
              hide();
              dispatchCommand(item.onClick);
            },
            isDisabled: item.disabled,
            children: item.title
          }, idx);
        })
      });
    }
  }, {
    key: "renderSelected",
    value: function renderSelected(item) {
      var selected = item.selected;
      if (selected !== undefined) {
        return selected ? /*#__PURE__*/jsx(EditorDoneIcon, {
          primaryColor: colors.B400,
          size: "small",
          label: "test question"
        }) : /*#__PURE__*/jsx(Spacer, {});
      }
      return undefined;
    }
  }]);
  return Dropdown;
}(Component);

var DropdownExpandContainer = styled.span.withConfig({
  displayName: "Dropdown__DropdownExpandContainer",
  componentId: "sc-3zkct4-0"
})(["margin-left:-8px;"]);
var IconGroup = styled.div.withConfig({
  displayName: "Dropdown__IconGroup",
  componentId: "sc-3zkct4-1"
})(["display:flex;"]);
var CompositeIcon = function CompositeIcon(_ref) {
  var icon = _ref.icon;
  return /*#__PURE__*/jsxs(IconGroup, {
    children: [icon, /*#__PURE__*/jsx(DropdownExpandContainer, {
      children: /*#__PURE__*/jsx(ExpandIcon, {
        label: "Expand dropdown menu"
      })
    })]
  });
};
var Dropdown = /*#__PURE__*/function (_Component) {
  _inherits(Dropdown, _Component);
  var _super = _createSuper(Dropdown);
  function Dropdown() {
    var _this;
    _classCallCheck(this, Dropdown);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _super.call.apply(_super, [this].concat(args));
    _defineProperty(_assertThisInitialized(_this), "state", {
      isOpen: false
    });
    _defineProperty(_assertThisInitialized(_this), "renderArrayOptions", function (options) {
      return /*#__PURE__*/jsx(Dropdown$1, {
        hide: _this.hide,
        dispatchCommand: _this.props.dispatchCommand,
        items: options
      });
    });
    _defineProperty(_assertThisInitialized(_this), "toggleOpen", function () {
      _this.setState({
        isOpen: !_this.state.isOpen
      });
    });
    _defineProperty(_assertThisInitialized(_this), "hide", function () {
      _this.setState({
        isOpen: false
      });
    });
    return _this;
  }
  _createClass(Dropdown, [{
    key: "render",
    value: function render() {
      var isOpen = this.state.isOpen;
      var _this$props = this.props,
        title = _this$props.title,
        icon = _this$props.icon,
        options = _this$props.options,
        dispatchCommand = _this$props.dispatchCommand,
        mountPoint = _this$props.mountPoint,
        boundariesElement = _this$props.boundariesElement,
        scrollableElement = _this$props.scrollableElement,
        hideExpandIcon = _this$props.hideExpandIcon;
      var trigger;
      if (icon) {
        var TriggerIcon = hideExpandIcon ? icon : /*#__PURE__*/jsx(CompositeIcon, {
          icon: icon
        });
        trigger = /*#__PURE__*/jsx(Button, {
          title: title,
          icon: TriggerIcon,
          onClick: this.toggleOpen,
          selected: isOpen
        });
      } else {
        trigger = /*#__PURE__*/jsx(Button, {
          iconAfter: /*#__PURE__*/jsx(DropdownExpandContainer, {
            children: /*#__PURE__*/jsx(ExpandIcon, {
              label: "Expand dropdown menu"
            })
          }),
          onClick: this.toggleOpen,
          selected: isOpen,
          children: title
        });
      }

      /**
       * We want to change direction of our dropdowns a bit early,
       * not exactly when it hits the boundary.
       */
      var fitTolerance = 10;
      var fitWidth = Array.isArray(options) ? menuItemDimensions.width : options.width;
      var fitHeight = Array.isArray(options) ? options.length * menuItemDimensions.height + itemSpacing * 2 : options.height;
      return /*#__PURE__*/jsx(DropdownWithOuterListeners, {
        mountTo: mountPoint,
        boundariesElement: boundariesElement,
        scrollableElement: scrollableElement,
        isOpen: isOpen,
        handleClickOutside: this.hide,
        handleEscapeKeydown: this.hide,
        fitWidth: fitWidth + fitTolerance,
        fitHeight: fitHeight + fitTolerance,
        trigger: trigger,
        children: Array.isArray(options) ? this.renderArrayOptions(options) : options.render({
          hide: this.hide,
          dispatchCommand: dispatchCommand
        })
      });
    }
  }]);
  return Dropdown;
}(Component);

var TextField = /*#__PURE__*/function (_Component) {
  _inherits(TextField, _Component);
  var _super = _createSuper(TextField);
  function TextField(props) {
    var _this;
    _classCallCheck(this, TextField);
    _this = _super.call(this, props);
    _defineProperty(_assertThisInitialized(_this), "handleChange", function (e) {
      _this.setState({
        text: e.target.value
      });
    });
    _defineProperty(_assertThisInitialized(_this), "handleSubmit", function (e) {
      e.preventDefault();
      if (_this.props.onSubmit) {
        _this.props.onSubmit(_this.state.text);
      }
    });
    _defineProperty(_assertThisInitialized(_this), "handleBlur", function (e) {
      e.preventDefault();
      if (_this.props.onBlur) {
        _this.props.onBlur(_this.state.text);
      }
    });
    _this.state = {
      text: props.defaultValue || ''
    };
    return _this;
  }
  _createClass(TextField, [{
    key: "UNSAFE_componentWillReceiveProps",
    value: function UNSAFE_componentWillReceiveProps(nextProps) {
      if (this.state.text !== nextProps.defaultValue) {
        this.setState({
          text: nextProps.defaultValue || ''
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var placeholder = this.props.placeholder;
      return /*#__PURE__*/jsx("form", {
        onSubmit: this.handleSubmit,
        children: /*#__PURE__*/jsx(Input, {
          value: this.state.text,
          onChange: this.handleChange,
          placeholder: placeholder,
          onBlur: this.handleBlur
        })
      });
    }
  }]);
  return TextField;
}(Component);

var SelectWrapper = styled.div.withConfig({
  displayName: "Select__SelectWrapper",
  componentId: "sc-1g866sn-0"
})(["width:", "px;"], function (props) {
  return props.width;
});
var Search = /*#__PURE__*/function (_Component) {
  _inherits(Search, _Component);
  var _super = _createSuper(Search);
  function Search() {
    var _this;
    _classCallCheck(this, Search);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _super.call.apply(_super, [this].concat(args));
    _defineProperty(_assertThisInitialized(_this), "state", {
      isOpen: false
    });
    return _this;
  }
  _createClass(Search, [{
    key: "render",
    value: function render() {
      var _this$props = this.props;
        _this$props.options;
        _this$props.onChange;
        _this$props.defaultValue;
        _this$props.placeholder;
        var _this$props$width = _this$props.width,
        width = _this$props$width === void 0 ? 200 : _this$props$width;
      return /*#__PURE__*/jsx(SelectWrapper, {
        width: width
      });
    }
  }]);
  return Search;
}(Component);

var akGridSize = gridSize();
var ToolbarContainer = styled.div.withConfig({
  displayName: "Toolbar__ToolbarContainer",
  componentId: "sc-i2m8ex-0"
})(["background-color:", ";border-radius:", "px;box-shadow:0 0 1px rgba(9,30,66,0.31),0 4px 8px -2px rgba(9,30,66,0.25);padding:", "px ", "px;display:flex;line-height:1;box-sizing:border-box;", ";& > div{align-items:center;}"], themed({
  light: 'white',
  dark: colors.DN70
}), borderRadius(), akGridSize / 2, akGridSize, function (props) {
  return props.hasCompactLeftPadding ? "padding-left: ".concat(akGridSize / 2, "px") : '';
});
var compareItemWithKeys = function compareItemWithKeys(leftItem, rightItem) {
  var excludedKeys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
  return Object.keys(leftItem).filter(function (key) {
    return excludedKeys.indexOf(key) === -1;
  }).every(function (key) {
    return leftItem[key] instanceof Object ? shallowEqual(leftItem[key], rightItem[key]) : leftItem[key] === rightItem[key];
  });
};
var isSameItem = function isSameItem(leftItem, rightItem) {
  if (leftItem.type !== rightItem.type) {
    return false;
  }
  switch (leftItem.type) {
    case 'button':
      // Need to typecast `rightItem as typeof leftItem` otherwise we will
      // have to put the `type !==` inside each case.
      return compareItemWithKeys(leftItem, rightItem, ['type', 'onClick', 'onMouseEnter', 'onMouseLeave']);
    case 'input':
      return compareItemWithKeys(leftItem, rightItem, ['type', 'onSubmit', 'onBlur']);
    case 'select':
      if (Array.isArray(leftItem.options) && Array.isArray(rightItem.options) && !compareArrays(leftItem.options, rightItem.options, function (left, right) {
        return compareItemWithKeys(left, right);
      })) {
        return false;
      }
      return compareItemWithKeys(leftItem, rightItem, ['type', 'onChange', 'options']);
    case 'dropdown':
      if (Array.isArray(leftItem.options) && Array.isArray(rightItem.options) && !compareArrays(leftItem.options, rightItem.options, function (left, right) {
        return compareItemWithKeys(left, right, ['onClick']);
      })) {
        return false;
      }
      return compareItemWithKeys(leftItem, rightItem, ['type', 'options']);
    case 'custom':
      return false;
    case 'separator':
      return compareItemWithKeys(leftItem, rightItem);
  }
  return true;
};
var areSameItems = function areSameItems(leftArr, rightArr) {
  if (leftArr === undefined && rightArr === undefined) {
    return true;
  }
  if (leftArr === undefined || rightArr === undefined) {
    return false;
  }
  if (leftArr.length !== rightArr.length) {
    return false;
  }
  return leftArr.every(function (item, index) {
    return isSameItem(rightArr[index], item);
  });
};
var Toolbar = /*#__PURE__*/function (_Component) {
  _inherits(Toolbar, _Component);
  var _super = _createSuper(Toolbar);
  function Toolbar() {
    _classCallCheck(this, Toolbar);
    return _super.apply(this, arguments);
  }
  _createClass(Toolbar, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
        items = _this$props.items,
        dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent,
        dispatchCommand = _this$props.dispatchCommand,
        popupsMountPoint = _this$props.popupsMountPoint,
        popupsBoundariesElement = _this$props.popupsBoundariesElement,
        popupsScrollableElement = _this$props.popupsScrollableElement,
        className = _this$props.className,
        editorView = _this$props.editorView;
      if (!items || !items.length) {
        return null;
      }

      // Select has left padding of 4px to the border, everything else 8px
      var firstElementIsSelect = items[0].type === 'select';
      return /*#__PURE__*/jsx(ToolbarContainer, {
        "aria-label": "Floating Toolbar",
        hasCompactLeftPadding: firstElementIsSelect,
        className: className,
        children: /*#__PURE__*/jsx(ButtonGroup, {
          children: items.filter(function (item) {
            return !item.hidden;
          }).map(function (item, idx) {
            switch (item.type) {
              case 'button':
                var ButtonIcon = item.icon;
                return /*#__PURE__*/jsx(Button, {
                  className: item.className,
                  title: item.title,
                  href: item.href,
                  icon: item.icon ? /*#__PURE__*/jsx(ButtonIcon, {
                    label: item.title
                  }) : undefined,
                  appearance: item.appearance,
                  target: item.target,
                  onClick: function onClick() {
                    return dispatchCommand(item.onClick);
                  },
                  onMouseEnter: function onMouseEnter() {
                    return dispatchCommand(item.onMouseEnter);
                  },
                  onMouseLeave: function onMouseLeave() {
                    return dispatchCommand(item.onMouseLeave);
                  },
                  selected: item.selected,
                  disabled: item.disabled,
                  tooltipContent: item.tooltipContent,
                  testId: item.testId,
                  children: item.showTitle && item.title
                }, idx);
              case 'input':
                return /*#__PURE__*/jsx(TextField, {
                  mountPoint: popupsMountPoint,
                  boundariesElement: popupsBoundariesElement,
                  defaultValue: item.defaultValue,
                  placeholder: item.placeholder,
                  onSubmit: function onSubmit(value) {
                    return dispatchCommand(item.onSubmit(value));
                  },
                  onBlur: function onBlur(value) {
                    return dispatchCommand(item.onBlur(value));
                  }
                }, idx);
              case 'custom':
                {
                  return item.render(editorView, idx, dispatchAnalyticsEvent);
                }
              case 'dropdown':
                var DropdownIcon = item.icon;
                return /*#__PURE__*/jsx(Dropdown, {
                  title: item.title,
                  icon: DropdownIcon && /*#__PURE__*/jsx(DropdownIcon, {
                    label: item.title
                  }),
                  dispatchCommand: dispatchCommand,
                  options: item.options,
                  hideExpandIcon: item.hideExpandIcon,
                  mountPoint: popupsMountPoint,
                  boundariesElement: popupsBoundariesElement,
                  scrollableElement: popupsScrollableElement
                }, idx);
              case 'select':
                return /*#__PURE__*/jsx(Search, {
                  dispatchCommand: dispatchCommand,
                  options: item.options,
                  hideExpandIcon: item.hideExpandIcon,
                  mountPoint: popupsMountPoint,
                  boundariesElement: popupsBoundariesElement,
                  scrollableElement: popupsScrollableElement,
                  defaultValue: item.defaultValue,
                  placeholder: item.placeholder,
                  onChange: function onChange(selected) {
                    return dispatchCommand(item.onChange(selected));
                  }
                }, idx);
              case 'separator':
                return /*#__PURE__*/jsx(Separator, {}, idx);
            }
          })
        })
      });
    }
  }, {
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate(nextProps) {
      return this.props.node.type !== nextProps.node.type || !areSameItems(this.props.items, nextProps.items);
    }
  }]);
  return Toolbar;
}(Component);

export { areSameItems, Toolbar as default, isSameItem };
