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, Input, Switch, Radio } from '@whalecloud/fdx';
import { toolFormAttr } from "../../../utils";
var marks = {
  12: {
    label: null
  }
};
var itemKey = 'data.formItemSettings';

var CommonAppItemSettings = function CommonAppItemSettings(props) {
  var _rules$;

  var element = props.element,
      updateElement = props.updateElement;

  var _ref = element.data || {},
      _ref$formItemSettings = _ref.formItemSettings,
      formItemSettings = _ref$formItemSettings === void 0 ? {} : _ref$formItemSettings;

  var name = formItemSettings.name,
      label = formItemSettings.label,
      placeholder = formItemSettings.placeholder,
      disabled = formItemSettings.disabled,
      _formItemSettings$vis = formItemSettings.visible,
      visible = _formItemSettings$vis === void 0 ? true : _formItemSettings$vis,
      _formItemSettings$lay = formItemSettings.layout,
      layout = _formItemSettings$lay === void 0 ? 'horizontal' : _formItemSettings$lay,
      _formItemSettings$rul = formItemSettings.rules,
      rules = _formItemSettings$rul === void 0 ? [] : _formItemSettings$rul;
  var message = ((_rules$ = rules[0]) === null || _rules$ === void 0 ? void 0 : _rules$.message) || i18n('PAGEBUIDER_SETTINGS_REQUIRED_TIPS');
  var initialValues = {
    name: name,
    label: label,
    placeholder: placeholder,
    disabled: disabled,
    visible: visible,
    layout: layout
  };

  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, {
    label: i18n('PAGEBUIDER_SETTINGS_NAME'),
    name: "name"
  }, /*#__PURE__*/React.createElement(Input, {
    placeholder: "Input the form field name"
  })), /*#__PURE__*/React.createElement(Form.Item, {
    label: i18n('PAGEBUIDER_SETTINGS_LABEL_TEXT'),
    name: "label"
  }, /*#__PURE__*/React.createElement(Input, {
    placeholder: "Input the form field label text"
  })), /*#__PURE__*/React.createElement(Form.Item, {
    label: i18n('PAGEBUIDER_SETTINGS_LAYOUT'),
    name: "layout"
  }, /*#__PURE__*/React.createElement(Radio.Group, {
    size: "small"
  }, /*#__PURE__*/React.createElement(Radio.Button, {
    value: "horizontal"
  }, i18n('PAGEBUIDER_SETTINGS_HORIZONTAL')), /*#__PURE__*/React.createElement(Radio.Button, {
    value: "vertical"
  }, i18n('PAGEBUIDER_SETTINGS_VERTICAL')))), /*#__PURE__*/React.createElement(Form.Item, {
    label: i18n('PAGEBUIDER_SETTINGS_PLACE_HOLDER'),
    name: "placeholder"
  }, /*#__PURE__*/React.createElement(Input, {
    placeholder: i18n('PAGEBUIDER_SETTINGS_PLACEHOLDER_PLACEHOLDER')
  })), /*#__PURE__*/React.createElement(Form.Item, {
    label: i18n('PAGEBUIDER_SETTINGS_DISABLED'),
    name: "disabled",
    valuePropName: "checked"
  }, /*#__PURE__*/React.createElement(Switch, null)), /*#__PURE__*/React.createElement(Form.Item, {
    label: i18n('PAGEBUIDER_SETTINGS_VISIBLE'),
    name: "visible",
    valuePropName: "checked"
  }, /*#__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 element = getActiveElement(state);

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

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