import _isEqual from "lodash/isEqual";
import * as React from "react";
import { connect } from "../../../redux";
import { i18n } from '@fishx/i18n';
import { getActiveElementWithChildren } from "../../../selectors";
import ColorPicker from "../components/ColorPicker";
import Select from "../components/Select";
import { Slider, Row, Col } from '@whalecloud/fdx';
import Selector from "./Selector";
import useUpdateHandlers from "../useUpdateHandlers";
var options = [i18n('PAGEBUIDER_SETTINGS_STYLE_NONE'), i18n('PAGEBUIDER_SETTINGS_STYLE_SOLID'), i18n('PAGEBUIDER_SETTINGS_STYLE_DASHED'), i18n('PAGEBUIDER_SETTINGS_STYLE_DOTTED')];
var DATA_NAMESPACE = "data.settings.border";
var EMPTY_OBJECT = {};

var Settings = function Settings(_ref) {
  var element = _ref.element,
      updateElement = _ref.updateElement;

  var _useUpdateHandlers = useUpdateHandlers({
    element: element,
    updateElement: updateElement,
    dataNamespace: DATA_NAMESPACE
  }),
      getUpdateValue = _useUpdateHandlers.getUpdateValue,
      getUpdatePreview = _useUpdateHandlers.getUpdatePreview;

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorPicker, {
    label: i18n('PAGEBUIDER_SETTINGS_COLOR'),
    valueKey: DATA_NAMESPACE + ".color",
    defaultValue: "#fff",
    updateValue: getUpdateValue("color"),
    updatePreview: getUpdatePreview("color")
  }), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
    span: "8",
    style: {
      paddingTop: 8
    }
  }, i18n('PAGEBUIDER_SETTINGS_WIDTH')), /*#__PURE__*/React.createElement(Col, {
    span: "16"
  }, /*#__PURE__*/React.createElement(Slider, {
    label: i18n('PAGEBUIDER_SETTINGS_WIDTH'),
    valueKey: DATA_NAMESPACE + ".width",
    defaultValue: 0,
    updateValue: getUpdateValue("width"),
    updatePreview: getUpdatePreview("width"),
    min: 0,
    max: 20,
    step: 1
  }))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
    span: "8",
    style: {
      paddingTop: 8
    }
  }, i18n('PAGEBUIDER_SETTINGS_RADIUS')), /*#__PURE__*/React.createElement(Col, {
    span: "16"
  }, /*#__PURE__*/React.createElement(Slider, {
    label: i18n('PAGEBUIDER_SETTINGS_RADIUS'),
    valueKey: DATA_NAMESPACE + ".radius",
    defaultValue: 0,
    updateValue: getUpdateValue("radius"),
    updatePreview: getUpdatePreview("radius"),
    min: 0,
    max: 100,
    step: 1
  }))), /*#__PURE__*/React.createElement("div", {
    className: "formbuilder-setting-select"
  }, /*#__PURE__*/React.createElement(Select, {
    label: i18n('PAGEBUIDER_SETTINGS_STYLE'),
    valueKey: DATA_NAMESPACE + ".style",
    defaultValue: i18n('PAGEBUIDER_SETTINGS_STYLE_NONE'),
    updateValue: getUpdateValue("style"),
    options: options
  })), /*#__PURE__*/React.createElement(Selector, {
    label: i18n('PAGEBUIDER_SETTINGS_BORDERS'),
    valueKey: DATA_NAMESPACE + ".borders",
    defaultValue: EMPTY_OBJECT,
    updateValue: getUpdateValue("borders")
  }));
};

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, null, {
  areStatePropsEqual: _isEqual
})(Settings);
//# sourceMappingURL=Settings.js.map