import _get from "lodash/get";
import * as React from "react";
import { connect } from "react-redux";
import { Input } from "@webiny/ui/Input";
import { Grid, Cell } from "@webiny/ui/Grid";
import { Icon } from "@webiny/ui/Icon";
import { Slider } from '@whalecloud/fdx';
import { InputContainer } from "./StyledComponents";
import { getActiveElementWithChildren } from "../../../selectors";

var SliderWithInput = function SliderWithInput(_ref) {
  var value = _ref.value,
      icon = _ref.icon,
      placeholder = _ref.placeholder,
      updateValue = _ref.updateValue,
      updatePreview = _ref.updatePreview,
      className = _ref.className,
      _ref$min = _ref.min,
      min = _ref$min === void 0 ? 0 : _ref$min,
      _ref$max = _ref.max,
      max = _ref$max === void 0 ? 100 : _ref$max,
      _ref$step = _ref.step,
      step = _ref$step === void 0 ? 1 : _ref$step;
  return /*#__PURE__*/React.createElement(Grid, {
    className: className
  }, /*#__PURE__*/React.createElement(Cell, {
    span: 2
  }, /*#__PURE__*/React.createElement(Icon, {
    icon: icon
  })), /*#__PURE__*/React.createElement(Cell, {
    span: 6
  }, /*#__PURE__*/React.createElement(Slider, {
    value: value,
    onChange: updateValue,
    onInput: updatePreview,
    min: min,
    max: value > max ? value : max,
    step: step,
    style: {
      width: '100%'
    }
  })), /*#__PURE__*/React.createElement(Cell, {
    span: 4
  }, /*#__PURE__*/React.createElement(InputContainer, null, /*#__PURE__*/React.createElement(Input, {
    className: "formbuilder-setting-input",
    placeholder: placeholder || "px",
    value: value,
    onChange: updateValue
  }))));
};

export default connect(function (state, _ref2) {
  var valueKey = _ref2.valueKey,
      _ref2$min = _ref2.min,
      min = _ref2$min === void 0 ? 0 : _ref2$min;
  var element = getActiveElementWithChildren(state);
  return {
    value: _get(element, valueKey, min)
  };
})(SliderWithInput);
//# sourceMappingURL=SliderWithInput.js.map