import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from "react";
import { connect } from "../../../redux";
import { set } from "dot-prop-immutable";
import { i18n } from '@fishx/i18n';
import { getActiveElement } from "../../../selectors";
import ColorPicker from "../../../components/ColorPicker";
import { Row, Col } from '@whalecloud/fdx';
var itemKey = 'data.formItemSettings';

var CommonColorPicker = function CommonColorPicker(props) {
  var updateElement = props.updateElement,
      element = props.element;
  var _element$data$formIte = element.data.formItemSettings,
      formItemSettings = _element$data$formIte === void 0 ? {} : _element$data$formIte;
  var _formItemSettings$sty = formItemSettings.style,
      style = _formItemSettings$sty === void 0 ? {} : _formItemSettings$sty;
  var _style$color = style.color,
      color = _style$color === void 0 ? '#fadb14' : _style$color;

  var _useState = useState(color),
      _useState2 = _slicedToArray(_useState, 2),
      nowColor = _useState2[0],
      setColor = _useState2[1];

  var onColorChange = function onColorChange(color) {
    setColor(color);
  };

  var onColorChangeComplete = function onColorChangeComplete(color) {
    var value = {
      color: color
    };
    var newElement = set(element, "".concat(itemKey, ".style"), value);
    updateElement({
      element: newElement
    });
  };

  return /*#__PURE__*/React.createElement(Row, {
    span: 24
  }, /*#__PURE__*/React.createElement(Col, {
    span: 8,
    style: {
      textAlign: 'right',
      fontSize: '14px',
      paddingRight: '8px'
    }
  }, i18n('PAGEBUIDER_SETTINGS_COLOR')), /*#__PURE__*/React.createElement(Col, {
    span: 16
  }, /*#__PURE__*/React.createElement(ColorPicker, {
    value: nowColor,
    onChange: onColorChange,
    onChangeComplete: onColorChangeComplete
  })));
};

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