import _get from "lodash/get";
import * as React from "react";
import { connect } from "react-redux";
import styled from "styled-components";
import { Row, Col } from "@whalecloud/fdx";
import ColorPickerCmp from "../../../components/ColorPicker";
import { getActiveElement } from "../../../selectors";
var Container = /*#__PURE__*/styled(Row, {
  target: "e4xkon10",
  label: "Container"
})({
  lineHeight: '29px',
  marginTop: 8,
  textAlign: 'right',
  overflow: 'initial',
  '> div:first-child': {
    paddingRight: 8
  }
});

var ColorPicker = function ColorPicker(_ref) {
  var label = _ref.label,
      value = _ref.value,
      updatePreview = _ref.updatePreview,
      updateValue = _ref.updateValue,
      _ref$themeColors = _ref.themeColors,
      themeColors = _ref$themeColors === void 0 ? {} : _ref$themeColors,
      _ref$valueChange = _ref.valueChange,
      valueChange = _ref$valueChange === void 0 ? function () {} : _ref$valueChange,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
  return /*#__PURE__*/React.createElement(React.Fragment, null, label ? /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Col, {
    span: 6
  }, label), /*#__PURE__*/React.createElement(Col, {
    span: 18
  }, /*#__PURE__*/React.createElement(ColorPickerCmp, {
    compact: true,
    value: value,
    onChange: updatePreview,
    onChangeComplete: updateValue,
    themeColors: themeColors,
    valueChange: valueChange,
    disabled: disabled
  }))) : /*#__PURE__*/React.createElement(ColorPickerCmp, {
    compact: true,
    value: value,
    onChange: updatePreview,
    onChangeComplete: updateValue,
    themeColors: themeColors,
    valueChange: valueChange,
    disabled: disabled
  }));
};

export default connect(function (state, _ref2) {
  var value = _ref2.value,
      valueKey = _ref2.valueKey,
      defaultValue = _ref2.defaultValue;
  return {
    value: valueKey ? _get(getActiveElement(state), valueKey, defaultValue) : value
  };
})( /*#__PURE__*/React.memo(ColorPicker));
//# sourceMappingURL=ColorPicker.js.map