import React from "react";
import { connect } from "../../../redux";
import { set } from "dot-prop-immutable";
import { i18n } from '@fishx/i18n';
import { getActiveElement, getElementWithChildren } from "../../../selectors";
import { SimpleForm as Form, Slider } from '@whalecloud/fdx';
import { toolFormAttr } from "../../../utils";
var marks = {
  12: {
    label: null
  }
};
var itemKey = 'data.settings.cols';
var defaultCols = {
  span: 24,
  offset: 0
};

var GridSettings = function GridSettings(props) {
  var element = props.element,
      updateElement = props.updateElement,
      hideOffSet = props.hideOffSet;
  var _element$data$setting = element.data.settings.cols,
      cols = _element$data$setting === void 0 ? defaultCols : _element$data$setting;
  var initialValues = {
    span: cols.span,
    offset: cols.offset
  };

  var onFormChange = function onFormChange(obj) {
    Object.keys(obj).forEach(function (key) {
      var propName = "".concat(itemKey, ".").concat(key);
      var newElement = set(element, propName, obj[key]);
      updateElement({
        element: newElement
      });
    });
  };

  return /*#__PURE__*/React.createElement(Form, Object.assign({}, toolFormAttr, {
    initialValues: initialValues,
    onValuesChange: onFormChange
  }), /*#__PURE__*/React.createElement(Form.Item, {
    name: "span",
    label: i18n('PAGEBUIDER_SETTINGS_COLUMN_GRID')
  }, /*#__PURE__*/React.createElement(Slider, {
    min: 1,
    max: 24,
    step: 1,
    marks: marks
  })), !hideOffSet && /*#__PURE__*/React.createElement(Form.Item, {
    name: "offset",
    label: i18n('PAGEBUIDER_SETTINGS_OFFSET')
  }, /*#__PURE__*/React.createElement(Slider, {
    min: 0,
    max: 24,
    step: 1,
    marks: marks
  })));
};

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

export default connect(function (state) {
  var element = getActiveElement(state);

  if (element.elements && element.elements.length > 0) {
    element = getElementWithChildren(state, element.id);
  }

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