import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React, { Children, Fragment, forwardRef } from 'react';
import PropTypes from 'prop-types';
import { compose, map } from 'ramda';
import { ensureArray } from 'ramda-extension';
import useGeneratedId from '../hooks/useGeneratedId';
import useDebounce from '../hooks/useDebounce';
import Slider from '../Slider';
import Text from '../Text';
import Box from '../Box';
import FormGroup, { getVariant } from '../FormGroup';

var DefaultRenderValues = function DefaultRenderValues(_ref) {
  var children = _ref.children;
  return Children.map(children, function (child, i) {
    return /*#__PURE__*/React.createElement(Fragment, null, i === 0 ? '' : ' - ', child);
  });
};

var SliderField = /*#__PURE__*/forwardRef(function (_ref2, ref) {
  var idProp = _ref2.id,
      Value = _ref2.renderValue,
      _ref2$renderValues = _ref2.renderValues,
      RenderValues = _ref2$renderValues === void 0 ? DefaultRenderValues : _ref2$renderValues,
      label = _ref2.label,
      hasError = _ref2.hasError,
      disabled = _ref2.disabled,
      readOnly = _ref2.readOnly,
      hint = _ref2.hint,
      value = _ref2.value,
      rest = _objectWithoutProperties(_ref2, ["id", "renderValue", "renderValues", "label", "hasError", "disabled", "readOnly", "hint", "value"]);

  var generatedStub = useGeneratedId();
  var generatedId = "field-".concat(generatedStub);
  var id = idProp || generatedId;
  var variant = getVariant({
    disabled: disabled,
    readOnly: readOnly,
    hasError: hasError
  });

  var _useDebounce = useDebounce(value, 200),
      _useDebounce2 = _slicedToArray(_useDebounce, 1),
      valueDebounced = _useDebounce2[0];

  var getValue = function getValue(x) {
    return Value ? /*#__PURE__*/React.createElement(Value, {
      key: x
    }, x) : x;
  };

  return /*#__PURE__*/React.createElement(Box, {
    ref: ref,
    sx: {
      position: 'relative'
    }
  }, /*#__PURE__*/React.createElement(Text, {
    sx: {
      textAlign: 'right',
      position: ['absolute', 'absolute', 'static'],
      right: 0,
      top: 0
    },
    mb: 0
  }, /*#__PURE__*/React.createElement(RenderValues, null, compose(map(getValue), ensureArray)(valueDebounced))), /*#__PURE__*/React.createElement(FormGroup, {
    id: id,
    label: label,
    hint: hint,
    disabled: disabled,
    readOnly: readOnly,
    hasError: hasError
  }, /*#__PURE__*/React.createElement(Slider, _extends({
    variant: variant,
    disabled: disabled,
    readOnly: readOnly,
    id: id,
    value: value
  }, rest))));
});
process.env.NODE_ENV !== "production" ? SliderField.propTypes = {
  /** Disabled state */
  disabled: PropTypes.bool,

  /** Error state */
  hasError: PropTypes.bool,

  /** Hint itext */
  hint: PropTypes.node,

  /** Used to connect label and slider. If not defined, component will generate
   * its own. */
  id: PropTypes.string,

  /** Label for Slider  */
  label: PropTypes.node,

  /** Called when `onChange` event is triggered. */
  onChange: PropTypes.func,

  /** Read-only state */
  readOnly: PropTypes.bool,

  /** Formattting component for the value */
  renderValue: PropTypes.elementType,

  /** Formattting for array of values */
  renderValues: PropTypes.func,

  /** Current value of checkbox. */
  value: PropTypes.any
} : void 0;
SliderField.displayName = 'SliderField';
export default SliderField;