'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var index$1 = require('../../../NumberInput/utils/index.js');
var index = require('../../utils/index.js');
var Slider_styles = require('./Slider.styles.js');
var react = require('../../../../utils/react.js');
var reactNumberFormat = require('react-number-format');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

var _StyledTrack;
var SliderUI = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var value = _ref.value,
    min = _ref.min,
    max = _ref.max,
    step = _ref.step,
    decimalScale = _ref.decimalScale,
    thousandsGroupStyle = _ref.thousandsGroupStyle,
    _ref$thousandSeparato = _ref.thousandSeparator,
    thousandSeparator = _ref$thousandSeparato === void 0 ? ' ' : _ref$thousandSeparato,
    decimalSeparator = _ref.decimalSeparator,
    fixedDecimalScale = _ref.fixedDecimalScale,
    disabled = _ref.disabled,
    readOnly = _ref.readOnly,
    hasPointer = _ref.hasPointer,
    onChange = _ref.onChange,
    onChangeSlider = _ref.onChangeSlider,
    setInnerValue = _ref.setInnerValue;
  var sliderId = react.safeUseId();
  var commonFormatterArgs = React.useMemo(function () {
    return index.createFormatterArgs({
      decimalScale: decimalScale,
      thousandsGroupStyle: thousandsGroupStyle,
      thousandSeparator: thousandSeparator,
      decimalSeparator: decimalSeparator,
      fixedDecimalScale: fixedDecimalScale
    });
  }, [decimalScale, thousandsGroupStyle, thousandSeparator, decimalSeparator, fixedDecimalScale]);
  var normalizedFormatterArgs = React.useMemo(function () {
    return index.createNormalizedFormatterArgs({
      decimalScale: decimalScale,
      thousandsGroupStyle: thousandsGroupStyle,
      thousandSeparator: thousandSeparator,
      decimalSeparator: decimalSeparator,
      fixedDecimalScale: fixedDecimalScale
    });
  }, [decimalScale, thousandsGroupStyle, thousandSeparator, decimalSeparator, fixedDecimalScale]);
  var sliderValue = React.useMemo(function () {
    return Math.max(min, Math.min(max, Number(reactNumberFormat.numericFormatter(String(value) || '', normalizedFormatterArgs))));
  }, [value, min, max, normalizedFormatterArgs]);
  var roundedSliderValue = React.useMemo(function () {
    return step ? min + Math.round((sliderValue - min) / step) * step : sliderValue;
  }, [sliderValue, min, step]);
  var handleChange = function handleChange(event) {
    if (disabled || readOnly) {
      return;
    }
    var rawValue = event.target.value;
    var withoutExtraSymbols = rawValue.replace(index$1.excludingNumberSchema, '');
    var cleanValue = Number(withoutExtraSymbols);
    setInnerValue(cleanValue);
    var formatted = reactNumberFormat.numericFormatter(String(cleanValue) || '', commonFormatterArgs);
    if (onChange) {
      onChange(event || undefined, {
        raw: cleanValue,
        formatted: formatted
      });
    }
    if (onChangeSlider) {
      onChangeSlider({
        raw: cleanValue,
        formatted: formatted
      });
    }
  };
  return /*#__PURE__*/React__default.default.createElement(Slider_styles.SliderWrapper, null, _StyledTrack || (_StyledTrack = /*#__PURE__*/React__default.default.createElement(Slider_styles.StyledTrack, null)), /*#__PURE__*/React__default.default.createElement(Slider_styles.StyledProgress, {
    value: roundedSliderValue,
    max: max,
    min: min
  }), /*#__PURE__*/React__default.default.createElement(Slider_styles.StyledSlider, {
    id: sliderId,
    ref: ref,
    type: "range",
    value: sliderValue,
    min: min,
    max: max,
    step: step,
    "aria-valuemin": min,
    "aria-valuemax": max,
    hasPointer: hasPointer,
    "aria-orientation": "horizontal",
    disabled: disabled,
    readOnly: readOnly,
    onChange: handleChange
  }));
});

exports.SliderUI = SliderUI;
