import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useState, useRef, useEffect, useCallback } from 'react';
import { SliderBase } from '../SliderBase/SliderBase.js';
import { sizeData } from '../../utils/index.js';
import { cx } from '../../../../utils/index.js';
import { classes } from '../../Slider.tokens.js';
import { InputHidden } from '../SliderBase/SliderBase.styles.js';
import { SingleWrapper, LabelWrapper, LabelContent, Label, SliderBaseWrapper, StyledRangeValue } from './Single.styles.js';
import { isNumber } from '../../../../utils/isNumber.js';
import { Handler } from '../../ui/Handler/Handler.js';
import { noop } from '../../../../utils/noop.js';

var _excluded = ["min", "max", "value", "disabled", "onChangeCommitted", "onChange", "ariaLabel", "label", "labelContentLeft", "labelContent", "sliderAlign", "showScale", "showRangeValues", "showCurrentValue", "hideMinValueDiff", "hideMaxValueDiff", "labelPlacement", "rangeValuesPlacement", "scaleAlign", "multipleStepSize", "defaultValue", "size", "name", "pointerSize", "pointerVisibility", "currentValueVisibility", "orientation", "reversed", "labelReversed"];
var clamp = function clamp(value, min, max) {
  return Math.max(min, Math.min(value, max));
};
var SingleSlider = function SingleSlider(_ref) {
  var _ref2;
  var min = _ref.min,
    max = _ref.max,
    value = _ref.value,
    disabled = _ref.disabled,
    onChangeCommitted = _ref.onChangeCommitted,
    onChange = _ref.onChange,
    ariaLabel = _ref.ariaLabel,
    label = _ref.label,
    labelContentLeft = _ref.labelContentLeft,
    labelContent = _ref.labelContent,
    _ref$sliderAlign = _ref.sliderAlign,
    sliderAlign = _ref$sliderAlign === void 0 ? 'left' : _ref$sliderAlign,
    showScale = _ref.showScale,
    showRangeValues = _ref.showRangeValues,
    showCurrentValue = _ref.showCurrentValue,
    hideMinValueDiff = _ref.hideMinValueDiff,
    hideMaxValueDiff = _ref.hideMaxValueDiff,
    _ref$labelPlacement = _ref.labelPlacement,
    labelPlacement = _ref$labelPlacement === void 0 ? 'top' : _ref$labelPlacement,
    rangeValuesPlacementOld = _ref.rangeValuesPlacement,
    _ref$scaleAlign = _ref.scaleAlign,
    scaleAlign = _ref$scaleAlign === void 0 ? 'bottom' : _ref$scaleAlign,
    _ref$multipleStepSize = _ref.multipleStepSize,
    multipleStepSize = _ref$multipleStepSize === void 0 ? 10 : _ref$multipleStepSize,
    defaultValue = _ref.defaultValue,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'm' : _ref$size,
    name = _ref.name,
    _ref$pointerSize = _ref.pointerSize,
    pointerSize = _ref$pointerSize === void 0 ? 'small' : _ref$pointerSize,
    _ref$pointerVisibilit = _ref.pointerVisibility,
    pointerVisibility = _ref$pointerVisibilit === void 0 ? 'always' : _ref$pointerVisibilit,
    _ref$currentValueVisi = _ref.currentValueVisibility,
    currentValueVisibility = _ref$currentValueVisi === void 0 ? 'always' : _ref$currentValueVisi,
    _ref$orientation = _ref.orientation,
    orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
    reversed = _ref.reversed,
    labelReversed = _ref.labelReversed,
    rest = _objectWithoutProperties(_ref, _excluded);
  var isVertical = orientation === 'vertical';
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isHovered = _useState2[0],
    setIsHovered = _useState2[1];
  var _useState3 = useState({
      handlePosition: 0,
      stepSize: 0,
      railFillWidth: 0
    }),
    _useState4 = _slicedToArray(_useState3, 2),
    state = _useState4[0],
    setState = _useState4[1];
  var innerRef = useRef(null);
  var _useState5 = useState(0),
    _useState6 = _slicedToArray(_useState5, 2),
    startOffset = _useState6[0],
    setStartOffset = _useState6[1];
  var _useState7 = useState(0),
    _useState8 = _slicedToArray(_useState7, 2),
    endOffset = _useState8[0],
    setEndOffset = _useState8[1];
  var innerValue = clamp((_ref2 = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : min, min, max);
  var _useState9 = useState(innerValue),
    _useState10 = _slicedToArray(_useState9, 2),
    dragValue = _useState10[0],
    setDragValue = _useState10[1];
  var stepSize = state.stepSize;
  var innerShowScale = showRangeValues || showScale;
  var innerShowCurrentValue = currentValueVisibility === 'hover' ? showCurrentValue && isHovered : showCurrentValue;
  var hasLabelContent = Boolean(label || labelContentLeft || labelContent) && (!isVertical || isVertical && sliderAlign !== 'none');
  var labelPlacementClass = !isVertical && (labelPlacement === 'outer' || labelPlacement === 'top') ? classes.labelPlacementOuter : classes.labelPlacementInner;
  var rangeValuesPlacement = rangeValuesPlacementOld === 'outer' || scaleAlign === 'bottom' ? 'outer' : 'inner';
  var scaleAlignClass = rangeValuesPlacement === 'outer' ? classes.rangeValuesPlacementOuter : classes.rangeValuesPlacementInner;
  var hideMinValueDiffClass = hideMinValueDiff && dragValue - min <= hideMinValueDiff ? classes.hideMinValue : '';
  var hideMaxValueDiffClass = hideMaxValueDiff && max - dragValue <= hideMaxValueDiff ? classes.hideMaxValue : '';
  var verticalOrientationClass = orientation === 'vertical' ? classes.verticalOrientation : '';
  var startLabelRef = useRef(null);
  var endLabelRef = useRef(null);
  var activeFirstValue = dragValue === min ? classes.activeRangeValue : undefined;
  var activeSecondValue = dragValue === max ? classes.activeRangeValue : undefined;
  useEffect(function () {
    var visibleValue = reversed ? max - dragValue + min : dragValue;
    var localValue = Math.min(Math.max(visibleValue, min), max) - min;
    if (!isVertical && rangeValuesPlacement === 'outer') {
      var _startLabelRef$curren, _endLabelRef$current;
      var startWidth = (_startLabelRef$curren = startLabelRef.current) === null || _startLabelRef$curren === void 0 ? void 0 : _startLabelRef$curren.offsetWidth;
      if (isNumber(startWidth)) {
        setStartOffset(Number(startWidth));
      }
      var endWidth = (_endLabelRef$current = endLabelRef.current) === null || _endLabelRef$current === void 0 ? void 0 : _endLabelRef$current.offsetWidth;
      if (isNumber(endWidth)) {
        setEndOffset(Number(endWidth));
      }
    } else if (isVertical && innerShowScale && (sliderAlign === 'left' || sliderAlign === 'right')) {
      setStartOffset(12);
      setEndOffset(12);
    } else {
      setStartOffset(0);
      setEndOffset(0);
    }
    setState(function (prevState) {
      return _objectSpread2(_objectSpread2({}, prevState), {}, {
        handlePosition: stepSize * localValue,
        railFillWidth: stepSize * localValue
      });
    });
  }, [dragValue, innerShowScale, labelPlacement, stepSize, rangeValuesPlacement, min, max, isVertical, reversed,
  // для перерасчета размеров
  sliderAlign, size]);
  var setStepSize = useCallback(function (newStepSize) {
    setState(function (prevState) {
      return _objectSpread2(_objectSpread2({}, prevState), {}, {
        stepSize: newStepSize
      });
    });
  }, []);
  var onHandleChange = function onHandleChange(handleValue, data) {
    var newValue = Math.round(reversed ? max - handleValue + min : handleValue);
    var newHandlePosition = isVertical ? data.y : data.x;
    setState(function (prevState) {
      return _objectSpread2(_objectSpread2({}, prevState), {}, {
        railFillWidth: newHandlePosition
      });
    });
    if (onChange) {
      if (value !== undefined) {
        onChange(newValue);
      }
      if (name && !value) {
        onChange({
          target: {
            value: newValue,
            name: name
          }
        });
      }
    }
    setDragValue(newValue);
  };
  var onHandleChangeCommitted = useCallback(function (handleValue, data) {
    var newValue = Math.round(reversed ? max - handleValue + min : handleValue);
    if (onChangeCommitted) {
      onChangeCommitted(newValue);
    }
    setState(function (prevState) {
      return _objectSpread2(_objectSpread2({}, prevState), {}, {
        handlePosition: isVertical ? data.lastY : data.lastX,
        railFillWidth: isVertical ? data.lastY : data.lastX
      });
    });
    setDragValue(newValue);
  }, [isVertical, min, max, reversed]);
  useEffect(function () {
    if (value !== dragValue) {
      var _ref3;
      var newValue = clamp((_ref3 = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : min, min, max);
      var clampedValue = Math.max(min, Math.min(newValue, max));
      setDragValue(clampedValue);
    }
  }, [value, defaultValue, dragValue, min, max]);
  var labelVerticalPlacement = reversed ? 'bottom' : 'top';
  var valuePlacement = sliderAlign === 'right' ? 'left' : 'right';
  var settings = sizeData[size][pointerSize === 'large' ? 'large' : 'small'];
  var onPointerEnter = function onPointerEnter() {
    setIsHovered(true);
  };
  var onPointerLeave = function onPointerLeave() {
    setIsHovered(false);
  };
  return /*#__PURE__*/React__default.createElement(SingleWrapper, {
    className: cx(labelPlacementClass, scaleAlignClass, verticalOrientationClass, sliderAlign === 'right' && classes.labelAlignLeft, (sliderAlign === 'center' || sliderAlign === 'none') && classes.labelAlignCenter, sliderAlign === 'left' && classes.labelAlignRight, labelVerticalPlacement === 'bottom' && classes.labelPlacementBottom, labelReversed && classes.labelContentReversed),
    onPointerEnter: onPointerEnter,
    onPointerLeave: onPointerLeave
  }, hasLabelContent && /*#__PURE__*/React__default.createElement(LabelWrapper, null, (labelContentLeft || labelContent) && /*#__PURE__*/React__default.createElement(LabelContent, null, labelContent), label && /*#__PURE__*/React__default.createElement(Label, null, label)), /*#__PURE__*/React__default.createElement(SliderBaseWrapper, {
    className: cx(!isVertical && rangeValuesPlacement === 'outer' && classes.rangeValuesPlacementOuter, !isVertical && rangeValuesPlacement !== 'outer' && classes.rangeValuesPlacementInner, verticalOrientationClass)
  }, innerShowScale && /*#__PURE__*/React__default.createElement(StyledRangeValue, {
    ref: startLabelRef,
    className: cx(hideMinValueDiffClass, activeFirstValue)
  }, reversed ? max : min), /*#__PURE__*/React__default.createElement(SliderBase, _extends({
    min: min,
    max: max,
    disabled: disabled,
    size: size,
    sliderAlign: sliderAlign,
    setStepSize: setStepSize,
    onChange: onHandleChangeCommitted,
    railFillWidth: state.railFillWidth,
    settings: settings,
    labelPlacement: labelPlacement,
    rangeValuesPlacement: rangeValuesPlacement,
    orientation: orientation,
    reversed: reversed
  }, rest), /*#__PURE__*/React__default.createElement(Handler, {
    size: pointerSize,
    visibility: pointerVisibility,
    isHovered: isHovered,
    orientation: orientation,
    stepSize: state.stepSize,
    onChangeCommitted: onHandleChangeCommitted,
    onChange: onHandleChange,
    position: state.handlePosition,
    min: min,
    max: max,
    startOffset: startOffset,
    endOffset: endOffset,
    value: dragValue,
    disabled: disabled,
    ariaLabel: ariaLabel,
    multipleStepSize: multipleStepSize,
    showCurrentValue: innerShowCurrentValue,
    valuePlacement: valuePlacement
  })), innerShowScale && /*#__PURE__*/React__default.createElement(StyledRangeValue, {
    ref: endLabelRef,
    className: cx(classes.maxRangeValue, hideMaxValueDiffClass, activeSecondValue)
  }, reversed ? min : max)), /*#__PURE__*/React__default.createElement(InputHidden, _extends({
    name: name,
    type: "number",
    datatype: "slider-single",
    value: dragValue,
    ref: innerRef
  }, noop)));
};

export { SingleSlider };
//# sourceMappingURL=Single.js.map
