import _isEqual from "lodash/isEqual";
import * as React from "react";
import { connect } from "../../../redux";
import { getActiveElementWithChildren } from "../../../selectors";
import { Tabs, Tab } from "@webiny/ui/Tabs";
import { i18n } from '@fishx/i18n';
import ColorPicker from "../components/ColorPicker";
import Input from "../components/Input";
import useUpdateHandlers from "../useUpdateHandlers";
var DATA_NAMESPACE = "data.settings.shadow"; // TODO: need to figure out how to properly type the `connect` props and apply it to all `elementSettings` plugins.

var Settings = function Settings(_ref) {
  var element = _ref.element,
      updateElement = _ref.updateElement;

  var _useUpdateHandlers = useUpdateHandlers({
    element: element,
    updateElement: updateElement,
    dataNamespace: DATA_NAMESPACE
  }),
      getUpdateValue = _useUpdateHandlers.getUpdateValue,
      getUpdatePreview = _useUpdateHandlers.getUpdatePreview;

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tab, {
    label: i18n('PAGEBUIDER_SETTINGS_SHADOW')
  }, /*#__PURE__*/React.createElement(ColorPicker, {
    label: i18n('PAGEBUIDER_SETTINGS_COLOR'),
    valueKey: DATA_NAMESPACE + ".color",
    updateValue: getUpdateValue("color"),
    updatePreview: getUpdatePreview("color")
  }), /*#__PURE__*/React.createElement(Input, {
    label: i18n('PAGEBUIDER_SETTINGS_HORIZONTAL_OFFSET'),
    valueKey: DATA_NAMESPACE + ".horizontal",
    updateValue: getUpdateValue("horizontal")
  }), /*#__PURE__*/React.createElement(Input, {
    label: i18n('PAGEBUIDER_SETTINGS_VERTICAL_OFFSET'),
    valueKey: DATA_NAMESPACE + ".vertical",
    updateValue: getUpdateValue("vertical")
  }), /*#__PURE__*/React.createElement(Input, {
    label: i18n('PAGEBUIDER_SETTINGS_BLUR'),
    valueKey: DATA_NAMESPACE + ".blur",
    updateValue: getUpdateValue("blur")
  }), /*#__PURE__*/React.createElement(Input, {
    label: i18n('PAGEBUIDER_SETTINGS_SPREAD'),
    valueKey: DATA_NAMESPACE + ".spread",
    updateValue: getUpdateValue("spread")
  }))));
};

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

export default connect(function (state) {
  return {
    element: getActiveElementWithChildren(state)
  };
}, mapDispatchToProps, null, {
  areStatePropsEqual: _isEqual
})(Settings);
//# sourceMappingURL=Settings.js.map