'use strict';

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

var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var SliderBase = require('../SliderBase/SliderBase.js');
var index$1 = require('../../utils/index.js');
var index = require('../../../../utils/index.js');
var Slider_tokens = require('../../Slider.tokens.js');
var SliderBase_styles = require('../SliderBase/SliderBase.styles.js');
var Single_styles = require('./Single.styles.js');
var isNumber = require('../../../../utils/isNumber.js');
var Handler = require('../../ui/Handler/Handler.js');
var noop = require('../../../../utils/noop.js');

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

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

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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
  var isVertical = orientation === 'vertical';
  var _useState = React.useState(false),
    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
    isHovered = _useState2[0],
    setIsHovered = _useState2[1];
  var _useState3 = React.useState({
      handlePosition: 0,
      stepSize: 0,
      railFillWidth: 0
    }),
    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
    state = _useState4[0],
    setState = _useState4[1];
  var innerRef = React.useRef(null);
  var _useState5 = React.useState(0),
    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
    startOffset = _useState6[0],
    setStartOffset = _useState6[1];
  var _useState7 = React.useState(0),
    _useState8 = _rollupPluginBabelHelpers.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 = React.useState(innerValue),
    _useState10 = _rollupPluginBabelHelpers.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') ? Slider_tokens.classes.labelPlacementOuter : Slider_tokens.classes.labelPlacementInner;
  var rangeValuesPlacement = rangeValuesPlacementOld === 'outer' || scaleAlign === 'bottom' ? 'outer' : 'inner';
  var scaleAlignClass = rangeValuesPlacement === 'outer' ? Slider_tokens.classes.rangeValuesPlacementOuter : Slider_tokens.classes.rangeValuesPlacementInner;
  var hideMinValueDiffClass = hideMinValueDiff && dragValue - min <= hideMinValueDiff ? Slider_tokens.classes.hideMinValue : '';
  var hideMaxValueDiffClass = hideMaxValueDiff && max - dragValue <= hideMaxValueDiff ? Slider_tokens.classes.hideMaxValue : '';
  var verticalOrientationClass = orientation === 'vertical' ? Slider_tokens.classes.verticalOrientation : '';
  var startLabelRef = React.useRef(null);
  var endLabelRef = React.useRef(null);
  var activeFirstValue = dragValue === min ? Slider_tokens.classes.activeRangeValue : undefined;
  var activeSecondValue = dragValue === max ? Slider_tokens.classes.activeRangeValue : undefined;
  React.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.isNumber(startWidth)) {
        setStartOffset(Number(startWidth));
      }
      var endWidth = (_endLabelRef$current = endLabelRef.current) === null || _endLabelRef$current === void 0 ? void 0 : _endLabelRef$current.offsetWidth;
      if (isNumber.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 _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prevState), {}, {
        handlePosition: stepSize * localValue,
        railFillWidth: stepSize * localValue
      });
    });
  }, [dragValue, innerShowScale, labelPlacement, stepSize, rangeValuesPlacement, min, max, isVertical, reversed,
  // для перерасчета размеров
  sliderAlign, size]);
  var setStepSize = React.useCallback(function (newStepSize) {
    setState(function (prevState) {
      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.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 _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prevState), {}, {
        railFillWidth: newHandlePosition
      });
    });
    if (onChange) {
      if (value !== undefined) {
        onChange(newValue);
      }
      if (name && !value) {
        onChange({
          target: {
            value: newValue,
            name: name
          }
        });
      }
    }
    setDragValue(newValue);
  };
  var onHandleChangeCommitted = React.useCallback(function (handleValue, data) {
    var newValue = Math.round(reversed ? max - handleValue + min : handleValue);
    if (onChangeCommitted) {
      onChangeCommitted(newValue);
    }
    setState(function (prevState) {
      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prevState), {}, {
        handlePosition: isVertical ? data.lastY : data.lastX,
        railFillWidth: isVertical ? data.lastY : data.lastX
      });
    });
    setDragValue(newValue);
  }, [isVertical, min, max, reversed]);
  React.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 = index$1.sizeData[size][pointerSize === 'large' ? 'large' : 'small'];
  var onPointerEnter = function onPointerEnter() {
    setIsHovered(true);
  };
  var onPointerLeave = function onPointerLeave() {
    setIsHovered(false);
  };
  return /*#__PURE__*/React__default.default.createElement(Single_styles.SingleWrapper, {
    className: index.cx(labelPlacementClass, scaleAlignClass, verticalOrientationClass, sliderAlign === 'right' && Slider_tokens.classes.labelAlignLeft, (sliderAlign === 'center' || sliderAlign === 'none') && Slider_tokens.classes.labelAlignCenter, sliderAlign === 'left' && Slider_tokens.classes.labelAlignRight, labelVerticalPlacement === 'bottom' && Slider_tokens.classes.labelPlacementBottom, labelReversed && Slider_tokens.classes.labelContentReversed),
    onPointerEnter: onPointerEnter,
    onPointerLeave: onPointerLeave
  }, hasLabelContent && /*#__PURE__*/React__default.default.createElement(Single_styles.LabelWrapper, null, (labelContentLeft || labelContent) && /*#__PURE__*/React__default.default.createElement(Single_styles.LabelContent, null, labelContent), label && /*#__PURE__*/React__default.default.createElement(Single_styles.Label, null, label)), /*#__PURE__*/React__default.default.createElement(Single_styles.SliderBaseWrapper, {
    className: index.cx(!isVertical && rangeValuesPlacement === 'outer' && Slider_tokens.classes.rangeValuesPlacementOuter, !isVertical && rangeValuesPlacement !== 'outer' && Slider_tokens.classes.rangeValuesPlacementInner, verticalOrientationClass)
  }, innerShowScale && /*#__PURE__*/React__default.default.createElement(Single_styles.StyledRangeValue, {
    ref: startLabelRef,
    className: index.cx(hideMinValueDiffClass, activeFirstValue)
  }, reversed ? max : min), /*#__PURE__*/React__default.default.createElement(SliderBase.SliderBase, _rollupPluginBabelHelpers.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.default.createElement(Handler.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.default.createElement(Single_styles.StyledRangeValue, {
    ref: endLabelRef,
    className: index.cx(Slider_tokens.classes.maxRangeValue, hideMaxValueDiffClass, activeSecondValue)
  }, reversed ? min : max)), /*#__PURE__*/React__default.default.createElement(SliderBase_styles.InputHidden, _rollupPluginBabelHelpers.extends({
    name: name,
    type: "number",
    datatype: "slider-single",
    value: dragValue,
    ref: innerRef
  }, noop.noop)));
};

exports.SingleSlider = SingleSlider;
//# sourceMappingURL=Single.js.map
