import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import React, { useEffect } from "react";
import { connect } from "../../../redux";
import { Tabs } from '@whalecloud/fdx';
import { getPlugin, getPlugins } from "../../../../plugins";
import { getActiveElement } from "../../../selectors";
import { useKeyHandler } from "../../../hooks/useKeyHandler";
import Menu from "./components/Menu";
import config from "../../../../config/helpConfig";
import { css } from "emotion";
import { userSettingsPlugins } from "../../../utils";
import Help from "../../../components/Editor/Help";
var TabPane = Tabs.TabPane;
var helpConfig = config.helpConfig,
    helpPoint = config.helpPoint;
var divider = "pb-editor-page-element-settings-divider";
var listWrapper = /*#__PURE__*/css({
  background: 'transparent',
  position: 'absolute',
  height: '48px',
  ".mdc-top-app-bar__row": {
    display: "flex",
    justifyContent: "center",
    flexDirection: "row",
    position: 'unset',
    height: '100%',
    ".mdc-top-app-bar__section": {
      justifyContent: "center"
    },
    ".mdc-icon-button": {
      padding: 0
    }
  }
}, "label:listWrapper;");

var getElementActions = function getElementActions(plugin) {
  if (!plugin.settings) {
    return [];
  }

  var pluginSettings = [].concat(_toConsumableArray(userSettingsPlugins(plugin.elementType)), _toConsumableArray(plugin.settings));
  var actions = pluginSettings.map(function (pl) {
    if (typeof pl === "string") {
      return {
        plugin: getPlugin(pl || divider),
        options: {}
      };
    }

    if (Array.isArray(pl)) {
      return {
        plugin: getPlugin(pl[0] || divider),
        options: pl[1]
      };
    }

    return null;
  });
  var elementActions = [].concat(_toConsumableArray(actions), [{
    plugin: getPlugin("pb-editor-page-element-settings-advanced"),
    options: {}
  } // { plugin: getPlugin("pb-editor-page-element-settings-save"), options: {} }
  ]);
  return elementActions // Eliminate empty plugins
  .filter(function (pl) {
    return pl && pl.plugin;
  }) // Eliminate duplicate plugins
  .filter(function (pl, index, array) {
    return array.findIndex(function (item) {
      return item.plugin.name === pl.plugin.name;
    }) === index;
  });
};

var ElementSettingsBar = function ElementSettingsBar(_ref) {
  var elementType = _ref.elementType,
      isHelp = _ref.isHelp,
      deactivateElement = _ref.deactivateElement,
      activeElement = _ref.activeElement;

  if (!elementType) {
    return null;
  }

  var plugin = getPlugins("pb-editor-page-element").find(function (pl) {
    return pl.elementType === elementType;
  });

  if (!plugin) {
    return null;
  }

  return /*#__PURE__*/React.createElement(ElementSettingsBarContent, {
    isHelp: isHelp,
    plugin: plugin,
    activeElement: activeElement,
    deactivateElement: deactivateElement
  });
};

var ElementSettingsBarContent = /*#__PURE__*/React.memo(function (_ref2) {
  var plugin = _ref2.plugin,
      activeElement = _ref2.activeElement,
      deactivateElement = _ref2.deactivateElement,
      isHelp = _ref2.isHelp;

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

  useEffect(function () {
    addKeyHandler("escape", function (e) {
      e.preventDefault();
      deactivateElement();
    });
    return function () {
      return removeKeyHandler("escape");
    };
  });
  var actions = getElementActions(plugin);

  if (actions.length <= 0) {
    return null;
  }

  return /*#__PURE__*/React.createElement(React.Fragment, null, isHelp && /*#__PURE__*/React.createElement(Help, {
    href: "".concat(helpPoint).concat(helpConfig[plugin.elementType])
  }), /*#__PURE__*/React.createElement(Tabs, {
    defaultActiveKey: "".concat(actions[0].name, "-0")
  }, actions.map(function (_ref3, index) {
    var plugin = _ref3.plugin,
        options = _ref3.options;
    return /*#__PURE__*/React.createElement(TabPane, {
      key: "".concat(plugin.name, "-").concat(index, "-").concat(activeElement),
      tab: /*#__PURE__*/React.createElement("span", null, plugin.renderAction({
        options: options
      }))
    }, typeof plugin.renderMenu === "function" && /*#__PURE__*/React.createElement(Menu, {
      plugin: plugin,
      options: options,
      isHelp: isHelp
    }));
  })));
});
ElementSettingsBarContent.displayName = "ElementSettingsBarContent";

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

export default connect(function (state) {
  var element = getActiveElement(state);
  return {
    elementType: element ? element.type : null
  };
}, mapDispatchToProps)( /*#__PURE__*/React.memo(ElementSettingsBar));
//# sourceMappingURL=ElementSettingsBar.js.map