import _cloneDeep from "lodash/cloneDeep";
import React, { useCallback, useEffect } from "react";
import { connect } from "../../../redux";
import { merge } from "dot-prop-immutable";
import { getPlugins } from "../../../../plugins";
import { renderPlugins } from "../../../../plugins";
import { isPluginActive } from "../../../selectors";
import { withActiveElement } from "../../../components";
import { useKeyHandler } from "../../../hooks/useKeyHandler";
import { useHandler } from "../../../../hooks/useHandler";
import { css } from "emotion";
import { Dialog, DialogContent, DialogActions, DialogButton, DialogCancel, DialogTitle } from "@webiny/ui/Dialog";
import { Form } from "@webiny/form";
import { Tabs } from "@webiny/ui/Tabs";
var emptyElement = {
  data: {},
  type: null
};
var dialogStyle = /*#__PURE__*/css({
  ".mdc-dialog__surface": {
    maxWidth: 865
  },
  ".webiny-ui-dialog__content": {
    width: 865,
    maxHeight: "70vh"
  }
}, "label:dialogStyle;");

var AdvancedSettings = function AdvancedSettings(props) {
  var element = props.element,
      open = props.open,
      deactivatePlugin = props.deactivatePlugin;

  var _ref = element || _cloneDeep(emptyElement),
      data = _ref.data,
      type = _ref.type;

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

  var closeDialog = useCallback(function () {
    deactivatePlugin({
      name: "pb-editor-page-element-settings-advanced"
    });
  }, []);
  var onSubmit = useHandler(props, function (_ref2) {
    var element = _ref2.element,
        updateElement = _ref2.updateElement;
    return function (formData) {
      // Get element settings plugins
      var plugins = getPlugins("pb-editor-page-element-advanced-settings").filter(function (pl) {
        return pl.elementType === element.type;
      });
      formData = plugins.reduce(function (formData, pl) {
        if (pl.onSave) {
          return pl.onSave(formData);
        }

        return formData;
      }, formData);
      updateElement({
        element: merge(element, "data", formData)
      });
      closeDialog();
    };
  });
  useEffect(function () {
    open ? addKeyHandler("escape", closeDialog) : removeKeyHandler("escape");
  });
  return /*#__PURE__*/React.createElement(Dialog, {
    open: open,
    onClose: closeDialog,
    className: dialogStyle,
    "data-testid": "pb-editor-advanced-element-settings-dialog"
  }, /*#__PURE__*/React.createElement(DialogTitle, null, "Settings"), /*#__PURE__*/React.createElement(Form, {
    key: element && element.id,
    data: data,
    onSubmit: onSubmit
  }, function (_ref3) {
    var submit = _ref3.submit,
        Bind = _ref3.Bind,
        data = _ref3.data,
        form = _ref3.form;
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(Tabs, null, renderPlugins("pb-editor-page-element-advanced-settings", {
      Bind: Bind,
      data: data,
      form: form
    }, {
      wrapper: false,
      filter: function filter(pl) {
        return pl.elementType === type;
      }
    }))), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(DialogCancel, null, "Cancel"), /*#__PURE__*/React.createElement(DialogButton, {
      onClick: submit
    }, "Save")));
  }));
};

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

var withConnect = connect(function (state) {
  return {
    open: isPluginActive("pb-editor-page-element-settings-advanced")(state)
  };
}, mapDispatchToProps);
export default withConnect(withActiveElement({
  shallow: true
})( /*#__PURE__*/React.memo(AdvancedSettings, function (prev, next) {
  return prev.open === next.open;
})));
//# sourceMappingURL=AdvancedSettings.js.map