import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";

/* eslint-disable */
import React, { useEffect } from "react";
import { i18n } from '@fishx/i18n';
import { set } from "dot-prop-immutable";
import { connect } from "../../../redux";
import styled from "styled-components";
import { SimpleForm as Form, Collapse, Radio, Switch, Input, InputNumber } from '@whalecloud/fdx';
import { getActiveElementWithChildren } from "../../../selectors";
import { toolFormAttr, toolCollapseAttr } from "../../../utils";
import CommonStyleSettings from "../../elements/components/CommonStyleSettings";
/**
 * formSet
 * 设置表单Form属性
 */

var Panel = Collapse.Panel;
var FormContainer = /*#__PURE__*/styled("div", {
  target: "e1ulchoj0",
  label: "FormContainer"
})({
  padding: 5
});
var valueKey = "data.formSettings";

var Settings = function Settings(props) {
  var updateElement = props.updateElement,
      element = props.element;
  var formSettings = element.data.formSettings; // const { dataBinding } = formSettings;

  var initialValues = _objectSpread({}, formSettings); // const [varData, setVarData] = useState([]);
  // const [sqlData, setSqlData] = useState([]);
  // const initialValuesData = { dataBinding };


  var _Form$useForm = Form.useForm(),
      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
      form = _Form$useForm2[0];

  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
      }); // colon

      if (propName === 'data.formSettings.colon') {
        newElement.elements.map(function (v) {
          v.elements.map(function (vl) {
            vl.elements.map(function (item) {
              var newElements = set(item, propName, obj[key]);
              updateElement({
                element: newElements
              });
            });
          });
        });
      }
    });
  }; // const onFormChangeData = (obj: Object) => {
  //   Object.keys(obj).forEach((key: string) => {
  //     const propName = `${valueKey}.${key}`;
  //     const value = obj[key];
  //     const newElement = set(element, propName, value);
  //     updateElement({
  //       element: newElement
  //     });
  //   });
  // }


  useEffect(function () {
    form.resetFields();
  }, []);
  return /*#__PURE__*/React.createElement(FormContainer, null, /*#__PURE__*/React.createElement(Collapse, Object.assign({}, toolCollapseAttr, {
    defaultActiveKey: ['1', '2', '3']
  }), /*#__PURE__*/React.createElement(Panel, {
    header: i18n('PAGEBUIDER_SETTINGS'),
    key: "1"
  }, /*#__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, null)), /*#__PURE__*/React.createElement(Form.Item, {
    label: i18n('PAGEBUIDER_SETTINGS_FORM_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(Radio.Button, {
    value: "inline"
  }, i18n('PAGEBUIDER_SETTINGS_INLINE')))), /*#__PURE__*/React.createElement(Form.Item, {
    label: i18n('PAGEBUIDER_SETTINGS_LABEL_ALIGN'),
    name: "labelAlign"
  }, /*#__PURE__*/React.createElement(Radio.Group, {
    size: "small"
  }, /*#__PURE__*/React.createElement(Radio.Button, {
    value: "left"
  }, i18n('PAGEBUIDER_SETTINGS_LEFT')), /*#__PURE__*/React.createElement(Radio.Button, {
    value: "right"
  }, i18n('PAGEBUIDER_SETTINGS_RIGHT')))), /*#__PURE__*/React.createElement(Form.Item, {
    label: i18n('PAGEBUIDER_SETTINGS_COLON'),
    name: "colon",
    valuePropName: "checked"
  }, /*#__PURE__*/React.createElement(Switch, null)), /*#__PURE__*/React.createElement(Form.Item, {
    label: i18n('PAGEBUIDER_SETTINGS_LABEL_WIDTH'),
    name: "labelWidth"
  }, /*#__PURE__*/React.createElement(InputNumber, {
    min: 50
  })), /*#__PURE__*/React.createElement("br", null)), /*#__PURE__*/React.createElement(CommonStyleSettings, null))));
};

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

export default connect(function (state) {
  return {
    element: getActiveElementWithChildren(state)
  };
}, mapDispatchToProps)(Settings);
//# sourceMappingURL=Settings.js.map