import _isEqual from "lodash/isEqual";
import React, { useEffect, useRef } from 'react';
import { connect } from "../../redux";
import styled from 'styled-components';
import { css } from 'emotion';
import { DrawerContent } from '@webiny/ui/Drawer';
import { getPlugins } from "../../../plugins";
import { useKeyHandler } from "../../hooks/useKeyHandler";
import { getActivePlugins } from "../../selectors";
var ToolbarDrawerContainer = /*#__PURE__*/styled('div', {
  target: "e1pmh41k0",
  label: "ToolbarDrawerContainer"
})({
  height: 'calc(100% - 32px)'
});
var drawerStyle = /*#__PURE__*/css({
  height: '100%',
  '> div': {
    height: '100% !important'
  }
}, "label:drawerStyle;");

var mapDispatchToProps = function mapDispatchToProps(dispatch) {
  return {
    deactivatePlugin: function deactivatePlugin(payload) {
      dispatch({
        type: 'ui/deactivatePlugin',
        payload: payload
      });
    }
  };
};

var ToolbarDrawer = connect(null, mapDispatchToProps)(function (_ref) {
  var name = _ref.name,
      active = _ref.active,
      children = _ref.children,
      deactivatePlugin = _ref.deactivatePlugin;

  var _useKeyHandler = useKeyHandler(),
      removeKeyHandler = _useKeyHandler.removeKeyHandler,
      addKeyHandler = _useKeyHandler.addKeyHandler;

  var last = useRef({
    active: null
  });
  useEffect(function () {
    if (active && !last.current.active) {
      addKeyHandler('escape', function (e) {
        e.preventDefault();
        deactivatePlugin({
          name: name
        });
      });
    }

    if (!active && last.current.active) {
      removeKeyHandler('escape');
    }
  });
  useEffect(function () {
    last.current = {
      active: active
    };
  });
  return /*#__PURE__*/React.createElement("div", {
    className: "h-full"
  }, /*#__PURE__*/React.createElement(DrawerContent, {
    className: drawerStyle
  }, children));
});

var Toolbar = function Toolbar(_ref2) {
  var activePluginsTop = _ref2.activePluginsTop;
  var actionsTop = getPlugins('pb-editor-toolbar-top');
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolbarDrawerContainer, null, actionsTop.filter(function (plugin) {
    return typeof plugin.renderDrawer === 'function';
  }).map(function (plugin) {
    return /*#__PURE__*/React.createElement(ToolbarDrawer, {
      key: plugin.name,
      name: plugin.name,
      active: Boolean(activePluginsTop.includes(plugin.name))
    }, plugin.renderDrawer());
  })));
};

export default connect(function (state) {
  return {
    activePluginsTop: getActivePlugins('pb-editor-toolbar-top')(state).map(function (pl) {
      return pl.name;
    }),
    activePluginsBottom: getActivePlugins('pb-editor-toolbar-bottom')(state).map(function (pl) {
      return pl.name;
    })
  };
}, null, null, {
  areStatePropsEqual: _isEqual
})(Toolbar);
//# sourceMappingURL=Toolbar.js.map