import React__default, { forwardRef, useMemo } from 'react';
import { excludingNumberSchema } from '../../../NumberInput/utils/index.js';
import { createFormatterArgs, createNormalizedFormatterArgs } from '../../utils/index.js';
import { SliderWrapper, StyledTrack, StyledProgress, StyledSlider } from './Slider.styles.js';
import { safeUseId } from '../../../../utils/react.js';
import { numericFormatter } from 'react-number-format';

var _StyledTrack;
var SliderUI = /*#__PURE__*/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 = safeUseId();
  var commonFormatterArgs = useMemo(function () {
    return createFormatterArgs({
      decimalScale: decimalScale,
      thousandsGroupStyle: thousandsGroupStyle,
      thousandSeparator: thousandSeparator,
      decimalSeparator: decimalSeparator,
      fixedDecimalScale: fixedDecimalScale
    });
  }, [decimalScale, thousandsGroupStyle, thousandSeparator, decimalSeparator, fixedDecimalScale]);
  var normalizedFormatterArgs = useMemo(function () {
    return createNormalizedFormatterArgs({
      decimalScale: decimalScale,
      thousandsGroupStyle: thousandsGroupStyle,
      thousandSeparator: thousandSeparator,
      decimalSeparator: decimalSeparator,
      fixedDecimalScale: fixedDecimalScale
    });
  }, [decimalScale, thousandsGroupStyle, thousandSeparator, decimalSeparator, fixedDecimalScale]);
  var sliderValue = useMemo(function () {
    return Math.max(min, Math.min(max, Number(numericFormatter(String(value) || '', normalizedFormatterArgs))));
  }, [value, min, max, normalizedFormatterArgs]);
  var roundedSliderValue = 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(excludingNumberSchema, '');
    var cleanValue = Number(withoutExtraSymbols);
    setInnerValue(cleanValue);
    var formatted = numericFormatter(String(cleanValue) || '', commonFormatterArgs);
    if (onChange) {
      onChange(event || undefined, {
        raw: cleanValue,
        formatted: formatted
      });
    }
    if (onChangeSlider) {
      onChangeSlider({
        raw: cleanValue,
        formatted: formatted
      });
    }
  };
  return /*#__PURE__*/React__default.createElement(SliderWrapper, null, _StyledTrack || (_StyledTrack = /*#__PURE__*/React__default.createElement(StyledTrack, null)), /*#__PURE__*/React__default.createElement(StyledProgress, {
    value: roundedSliderValue,
    max: max,
    min: min
  }), /*#__PURE__*/React__default.createElement(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
  }));
});

export { SliderUI };
