import _isEqual from "lodash/isEqual";
import React from "react";
import { connect } from "../../../redux";
import { i18n } from '@fishx/i18n';
import { SimpleForm as Form, Input, Button, Icon } from '@whalecloud/fdx';
import { getActiveElementWithChildren } from "../../../selectors";
import { toolFormAttr } from "../../../utils";
/**
 * OptionsSettings (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 OptionsSettings = function OptionsSettings(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((key: string) => {
    //   const propName = `${valueKey}.${key}`;
    //   const newElement = set(element, propName, obj[key]);
    //   updateElement({
    //     element: newElement
    //   });
    // })
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form, Object.assign({}, toolFormAttr, {
    autoComplete: "off",
    initialValues: {},
    onValuesChange: onFormChange
  }), /*#__PURE__*/React.createElement(Form.List, {
    name: "options"
  }, function (fields, _ref) {
    var add = _ref.add,
        remove = _ref.remove;
    return /*#__PURE__*/React.createElement(React.Fragment, null, fields.map(function (field) {
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form.Item, Object.assign({}, field, {
        name: [field.name, 'first'],
        fieldKey: [field.fieldKey, 'first'],
        rules: [{
          required: true,
          message: 'Missing first name'
        }]
      }), /*#__PURE__*/React.createElement(Input, {
        placeholder: "First Name"
      })), /*#__PURE__*/React.createElement(Form.Item, Object.assign({}, field, {
        name: [field.name, 'last'],
        fieldKey: [field.fieldKey, 'last'],
        rules: [{
          required: true,
          message: 'Missing last name'
        }]
      }), /*#__PURE__*/React.createElement(Input, {
        placeholder: "Last Name"
      })), /*#__PURE__*/React.createElement(Icon, {
        type: "minus-circle",
        onClick: function onClick() {
          return remove(field.name);
        }
      }));
    }), /*#__PURE__*/React.createElement(Form.Item, null, /*#__PURE__*/React.createElement(Button, {
      type: "dashed",
      onClick: function onClick() {
        return add();
      },
      block: true,
      icon: "plus"
    }, i18n('LOGICBUILDER_OPT_ADD_FIELD'))));
  })));
};

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

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