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

var Settings = function Settings(props) {
  var valueKey = props.valueKey;
  var updateSettings = useHandler(props, function (_ref) {
    var element = _ref.element,
        updateElement = _ref.updateElement,
        save = _ref.save;
    return function (name, newValue) {
      var history = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
      newValue = parseInt(newValue) || 24;
      var newElement = set(element, valueKey, newValue);
      updateElement({
        element: newElement,
        history: history,
        merge: true
      }); // save({ setColFlag: 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-grid-cols-setting",
    icon: /*#__PURE__*/React.createElement(ColumnIcon, null),
    valueKey: valueKey,
    min: 1,
    max: 24,
    updateValue: getUpdateValue("cols"),
    updatePreview: getUpdatePreview("cols")
  })));
};

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

export default connect(function (state, _ref2) {
  var styleAttribute = _ref2.styleAttribute;
  var valueKey = "data.settings." + styleAttribute;
  var element = getActiveElementWithChildren(state);
  return {
    valueKey: valueKey,
    element: element
  };
}, mapDispatchToProps)(Settings);
//# sourceMappingURL=Settings.js.map