import _get from "lodash/get";
import * as React from "react";
import { connect } from "react-redux";
import { Typography } from "@webiny/ui/Typography";
import { Grid, Cell } from "@webiny/ui/Grid";
import { Slider as SliderCmp } from "@webiny/ui/Slider";
import { getActiveElement } from "../../../selectors";

var Slider = function Slider(_ref) {
  var label = _ref.label,
      value = _ref.value,
      updatePreview = _ref.updatePreview,
      updateValue = _ref.updateValue,
      _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, null, /*#__PURE__*/React.createElement(Cell, {
    span: 4
  }, /*#__PURE__*/React.createElement(Typography, {
    use: "overline"
  }, label)), /*#__PURE__*/React.createElement(Cell, {
    span: 8
  }, /*#__PURE__*/React.createElement(SliderCmp, {
    value: value,
    onChange: updateValue,
    onInput: updatePreview,
    min: min,
    max: max,
    discrete: true,
    step: step
  })));
};

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