import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useEffect } from "react";
import { connect } from "../../../redux";
import { set } from "dot-prop-immutable";
import { i18n } from '@fishx/i18n';
import { getActiveElement } from "../../../selectors";
import { toolFormAttr } from "../../../utils";
import { SimpleForm as Form, Switch, Input } from '@whalecloud/fdx';
var valueKey = 'data.formItemSettings';

var CommonDateSettings = function CommonDateSettings(props) {
  var updateElement = props.updateElement,
      element = props.element,
      pickerFormat = props.pickerFormat,
      pickerShowNow = props.pickerShowNow;
  var _element$data = element.data;
  _element$data = _element$data === void 0 ? {} : _element$data;
  var _element$data$formIte = _element$data.formItemSettings,
      formItemSettings = _element$data$formIte === void 0 ? {} : _element$data$formIte;
  var _formItemSettings$for = formItemSettings.format,
      format = _formItemSettings$for === void 0 ? pickerFormat : _formItemSettings$for,
      _formItemSettings$sho = formItemSettings.showNow,
      showNow = _formItemSettings$sho === void 0 ? true : _formItemSettings$sho,
      _formItemSettings$sho2 = formItemSettings.showTime,
      showTime = _formItemSettings$sho2 === void 0 ? false : _formItemSettings$sho2,
      _formItemSettings$inp = formItemSettings.inputReadOnly,
      inputReadOnly = _formItemSettings$inp === void 0 ? false : _formItemSettings$inp;
  var initialValues = {
    format: format,
    showNow: showNow,
    showTime: showTime,
    inputReadOnly: inputReadOnly
  };

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

  useEffect(function () {
    form.setFieldsValue(_objectSpread({}, initialValues));
  }, [pickerFormat]);

  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(Form, Object.assign({
    form: form
  }, toolFormAttr, {
    initialValues: initialValues,
    onValuesChange: onFormChange
  }), /*#__PURE__*/React.createElement(Form.Item, {
    label: i18n('PAGEBUIDER_SETTINGS_FORMAT'),
    name: "format"
  }, /*#__PURE__*/React.createElement(Input, {
    placeholder: i18n('PAGEBUIDER_SETTINGS_INPUT_THE_FORMAT')
  })), pickerShowNow && /*#__PURE__*/React.createElement(Form.Item, {
    label: i18n('PAGEBUIDER_SETTINGS_SHOW_NOW'),
    name: "showNow",
    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) {
  return {
    element: getActiveElement(state)
  };
}, mapDispatchToProps)(CommonDateSettings);
//# sourceMappingURL=CommonDateSettings.js.map