import React, { useMemo } from "react";
import { set } from "dot-prop-immutable";
import { ReactComponent as ColumnIcon } from "@svgr/webpack!../../../assets/icons/column-icon.svg";
import { ReactComponent as SpacerIcon } from "@svgr/webpack!../../../assets/icons/spacer-icon.svg";
import SliderWithInput from "../components/SliderWithInput";
import { connect } from "../../../redux";
import { useHandler } from "../../../../hooks/useHandler";
import { getActiveElementWithChildren, getParentElementWithChildren } from "../../../selectors";

var Settings = function Settings(props) {
  var valueKey = props.valueKey;
  var updateSettings = useHandler(props, function (_ref) {
    var element = _ref.element,
        updateElement = _ref.updateElement;
    return function (name, newValue) {
      var history = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
      var propName = "".concat(valueKey, ".").concat(name);

      if (name === 'span') {
        newValue = parseInt(newValue) || 24;
      } else {
        newValue = parseInt(newValue) || 0;
      }

      var newElement = set(element, propName, newValue);
      updateElement({
        element: newElement,
        history: history,
        merge: true
      });
    };
  });
  var getUpdateValue = useMemo(function () {
    var handlers = {};
    return function (name) {
      if (!handlers[name]) {
        handlers[name] = function (value) {
          return updateSettings(name, value, true);
        };
      }

      return handlers[name];
    };
  }, [updateSettings]);
  var getUpdatePreview = useMemo(function () {
    var handlers = {};
    return function (name) {
      if (!handlers[name]) {
        handlers[name] = function (value) {
          return updateSettings(name, value, false);
        };
      }

      return handlers[name];
    };
  }, [updateSettings]);
  return /*#__PURE__*/React.createElement("div", {
    className: "pl-4 pr-4"
  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SliderWithInput, {
    className: "no-cols-setting",
    icon: /*#__PURE__*/React.createElement(ColumnIcon, null),
    valueKey: valueKey + ".span",
    min: 1,
    max: 24,
    updateValue: getUpdateValue("span"),
    updatePreview: getUpdatePreview("span")
  }), /*#__PURE__*/React.createElement(SliderWithInput, {
    className: "no-cols-offset-setting",
    icon: /*#__PURE__*/React.createElement(SpacerIcon, null),
    valueKey: valueKey + ".offset",
    min: 0,
    max: 24,
    updateValue: getUpdateValue("offset"),
    updatePreview: getUpdatePreview("offset")
  })));
};

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

export default connect(function (state, _ref2) {
  var styleAttribute = _ref2.styleAttribute;
  var valueKey = "data.settings." + styleAttribute;
  var element = getActiveElementWithChildren(state);

  if (element && element.data.formItemSettings) {
    // 表单的栅格需要其parentCol实现
    element = getParentElementWithChildren(state, element.id);
  }

  return {
    valueKey: valueKey,
    element: element
  };
}, mapDispatchToProps)(Settings);
//# sourceMappingURL=Settings.js.map