import React from "react";
import { connect } from "../../../redux"; // import styled from "styled-components";

import { set } from "dot-prop-immutable";
import { i18n } from '@fishx/i18n';
import { getActiveElementWithChildren } from "../../../selectors";
import { SimpleForm as Form, Input } from '@whalecloud/fdx';
import { toolFormAttr } from "../../../utils"; // const FormContainer = styled('div')({
//   padding: '0 5px',
// });

var itemKey = 'data.settings';
var defaultWidth = {
  width: {
    value: '100%'
  }
};

var WidthSetting = function WidthSetting(props) {
  var element = props.element,
      updateElement = props.updateElement;
  var _element$data = element.data;
  _element$data = _element$data === void 0 ? {} : _element$data;
  var _element$data$setting = _element$data.settings,
      settings = _element$data$setting === void 0 ? {} : _element$data$setting;
  var _settings$width = settings.width,
      width = _settings$width === void 0 ? defaultWidth : _settings$width;

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

  return (
    /*#__PURE__*/
    // <FormContainer>
    React.createElement(Form, Object.assign({}, toolFormAttr, {
      initialValues: {
        width: width.value
      },
      onValuesChange: onFormChange
    }), /*#__PURE__*/React.createElement(Form.Item, {
      label: i18n('PAGEBUIDER_SETTINGS_WIDTH'),
      name: "width"
    }, /*#__PURE__*/React.createElement(Input, null))) // </FormContainer>

  );
};

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)(WidthSetting);
//# sourceMappingURL=WidthSetting.js.map