import _isEqual from "lodash/isEqual";
import React from "react";
import { connect } from "../../../redux";
import { SimpleForm as Form, Input, Switch } from '@whalecloud/fdx';
import { set } from "dot-prop-immutable";
import { getActiveElementWithChildren } from "../../../selectors";
import { toolFormAttr } from "../../../utils";
/**
 * FormItemSettings (name,hidden,initialValue,required,tooltip,rules settings).
 * This component is reused in Padding and Margin plugins since the behavior of both CSS attributes is the same.
 */

var FormItemSettings = function FormItemSettings(props) {
  var name = props.name,
      initialValue = props.initialValue,
      _props$required = props.required,
      required = _props$required === void 0 ? false : _props$required,
      _props$readonly = props.readonly,
      readonly = _props$readonly === void 0 ? false : _props$readonly,
      _props$disabled = props.disabled,
      disabled = _props$disabled === void 0 ? false : _props$disabled,
      valueKey = props.valueKey,
      element = props.element,
      updateElement = props.updateElement;

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

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form, Object.assign({}, toolFormAttr, {
    initialValues: {
      name: name,
      initialValue: initialValue,
      required: required,
      readonly: readonly,
      disabled: disabled
    },
    onValuesChange: onFormChange
  }), /*#__PURE__*/React.createElement(Form.Item, {
    name: "name",
    label: "Name"
  }, /*#__PURE__*/React.createElement(Input, null)), /*#__PURE__*/React.createElement(Form.Item, {
    name: "placeholder",
    label: "Placeholder"
  }, /*#__PURE__*/React.createElement(Input, null)), /*#__PURE__*/React.createElement(Form.Item, {
    name: "initialValue",
    label: "InitialValue"
  }, /*#__PURE__*/React.createElement(Input, null)), /*#__PURE__*/React.createElement(Form.Item, {
    name: "required",
    label: "Required"
  }, /*#__PURE__*/React.createElement(Switch, null)), /*#__PURE__*/React.createElement(Form.Item, {
    name: "readonly",
    label: "Readonly"
  }, /*#__PURE__*/React.createElement(Switch, null)), /*#__PURE__*/React.createElement(Form.Item, {
    name: "disabled",
    label: "Disabled"
  }, /*#__PURE__*/React.createElement(Switch, null))));
};

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

export default connect(function (state) {
  var valueKey = "data.formSettings";
  var element = getActiveElementWithChildren(state);
  return {
    valueKey: valueKey,
    element: element
  };
}, mapDispatchToProps, null, {
  areStatePropsEqual: _isEqual
})(FormItemSettings);
//# sourceMappingURL=FormItemSettings.js.map