import React, { useEffect, useCallback } from "react";
import { css } from "emotion";
import { connect } from "../../../redux";
import { Tooltip } from '@whalecloud/fdx';
import { IconButton } from "@webiny/ui/Button";
import { useKeyHandler } from "../../../hooks/useKeyHandler";
import { getUi, getActivePlugins, isPluginActive } from "../../../selectors";
var activeStyle = /*#__PURE__*/css({
  "&.mdc-icon-button": {
    color: "var(--mdc-theme-primary)"
  }
}, "label:activeStyle;");

var Action = function Action(props) {
  var togglePlugin = props.togglePlugin,
      plugin = props.plugin,
      icon = props.icon,
      active = props.active,
      tooltip = props.tooltip,
      hideToolTip = props.hideToolTip,
      onClick = props.onClick,
      children = props.children;

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

  var clickHandler = useCallback(function () {
    if (typeof onClick === "function") {
      return onClick();
    }

    togglePlugin({
      name: plugin,
      closeOtherInGroup: true
    });
  }, [plugin, onClick]);
  useEffect(function () {
    var _props$shortcut = props.shortcut,
        shortcut = _props$shortcut === void 0 ? [] : _props$shortcut;
    var onClick = props.onClick;

    if (typeof shortcut === "string") {
      shortcut = [shortcut];
    }

    shortcut.map(function (short) {
      addKeyHandler(short, function (e) {
        var slateFocused = props.slateFocused,
            settingsActive = props.settingsActive;

        if (slateFocused || settingsActive) {
          return;
        }

        e.preventDefault();
        onClick();
      });
    });
    return function () {
      var _props$shortcut2 = props.shortcut,
          shortcut = _props$shortcut2 === void 0 ? [] : _props$shortcut2;

      if (typeof shortcut === "string") {
        shortcut = [shortcut];
      }

      shortcut.map(function (short) {
        removeKeyHandler(short);
      });
    };
  });

  var IconRender = function IconRender() {
    return icon ? /*#__PURE__*/React.createElement(IconButton, {
      icon: icon,
      onClick: clickHandler,
      className: active && activeStyle,
      "data-testid": props["data-testid"]
    }) : /*#__PURE__*/React.createElement("span", null, children);
  };

  return hideToolTip ? /*#__PURE__*/React.createElement(IconRender, null) : /*#__PURE__*/React.createElement(Tooltip, Object.assign({
    placement: "bottom",
    title: tooltip
  }, active ? {
    visible: false
  } : {}), /*#__PURE__*/React.createElement(IconRender, null));
};

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

export default connect(function (state, props) {
  return {
    active: isPluginActive(props.plugin)(state),
    slateFocused: getUi(state).slateFocused,
    settingsActive: getActivePlugins("pb-editor-page-element-settings")(state).length > 0
  };
}, mapDispatchToProps)(Action);
//# sourceMappingURL=Action.js.map