'use strict';

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

var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var cls = require('classnames');
var Slider_tokens = require('../../Slider.tokens.js');
var useRangeHandlers = require('../../hooks/useRangeHandlers.js');
var getTickStyle = require('../../utils/getTickStyle.js');
var getSingleSliderLayout = require('../../utils/getSingleSliderLayout.js');
var Single_styles = require('./Single.styles.js');
var SliderBase_styles = require('../SliderBase/SliderBase.styles.js');

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

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

var _StyledTrack;
var _excluded = ["min", "max", "value", "defaultValue", "name", "step", "label", "labelContentLeft", "labelContent", "labelPlacement", "labelReversed", "showScale", "showRangeValues", "scaleAlign", "hideMinValueDiff", "hideMaxValueDiff", "pointerSize", "pointerVisibility", "showCurrentValue", "currentValueVisibility", "orientation", "sliderAlign", "reversed", "valuePlacement", "multipleStepSize", "rangeValuesPlacement", "disabled", "onChange", "onChangeCommitted", "ariaLabel", "scaleTicks"];
var clamp = function clamp(value, min, max) {
  return Math.max(min, Math.min(value, max));
};
var SingleSlider = function SingleSlider(_ref) {
  var min = _ref.min,
    max = _ref.max,
    outerValue = _ref.value,
    defaultValue = _ref.defaultValue,
    name = _ref.name,
    _ref$step = _ref.step,
    step = _ref$step === void 0 ? 1 : _ref$step,
    label = _ref.label,
    labelContentLeft = _ref.labelContentLeft,
    labelContent = _ref.labelContent,
    _ref$labelPlacement = _ref.labelPlacement,
    labelPlacement = _ref$labelPlacement === void 0 ? 'top' : _ref$labelPlacement,
    labelReversed = _ref.labelReversed,
    showScale = _ref.showScale,
    showRangeValues = _ref.showRangeValues,
    _ref$scaleAlign = _ref.scaleAlign,
    scaleAlign = _ref$scaleAlign === void 0 ? 'bottom' : _ref$scaleAlign,
    hideMinValueDiff = _ref.hideMinValueDiff,
    hideMaxValueDiff = _ref.hideMaxValueDiff,
    _ref$pointerSize = _ref.pointerSize,
    pointerSize = _ref$pointerSize === void 0 ? 'small' : _ref$pointerSize,
    _ref$pointerVisibilit = _ref.pointerVisibility,
    pointerVisibility = _ref$pointerVisibilit === void 0 ? 'always' : _ref$pointerVisibilit,
    showCurrentValue = _ref.showCurrentValue,
    _ref$currentValueVisi = _ref.currentValueVisibility,
    currentValueVisibility = _ref$currentValueVisi === void 0 ? 'always' : _ref$currentValueVisi,
    _ref$orientation = _ref.orientation,
    orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
    _ref$sliderAlign = _ref.sliderAlign,
    sliderAlign = _ref$sliderAlign === void 0 ? 'left' : _ref$sliderAlign,
    reversed = _ref.reversed,
    valuePlacement = _ref.valuePlacement,
    _ref$multipleStepSize = _ref.multipleStepSize,
    multipleStepSize = _ref$multipleStepSize === void 0 ? 10 : _ref$multipleStepSize,
    rangeValuesPlacementOld = _ref.rangeValuesPlacement,
    disabled = _ref.disabled,
    onChange = _ref.onChange,
    onChangeCommitted = _ref.onChangeCommitted,
    ariaLabel = _ref.ariaLabel,
    scaleTicks = _ref.scaleTicks,
    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 clampedOuterValue = outerValue !== undefined ? clamp(outerValue, min, max) : undefined;
  var clampedDefaultValue = defaultValue !== undefined ? clamp(defaultValue, min, max) : undefined;
  var _useState3 = React.useState(clampedDefaultValue !== null && clampedDefaultValue !== void 0 ? clampedDefaultValue : min),
    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
    dragValue = _useState4[0],
    setDragValue = _useState4[1];
  var value = clampedOuterValue !== null && clampedOuterValue !== void 0 ? clampedOuterValue : dragValue;

  // Округляем значение, если оно не кратно новому шагу
  React.useEffect(function () {
    var remainder = (value - min) % step;
    if (Math.abs(remainder) > 0.000001) {
      var roundedValue = Math.round((value - min) / step) * step + min;
      var validValue = Math.max(min, Math.min(max, roundedValue));
      setDragValue(validValue);
      if (outerValue !== undefined) {
        emitChange(validValue);
      }
    }
  }, [step, min, max, value, outerValue]);
  var _getSingleSliderLayou = getSingleSliderLayout.getSingleSliderLayout({
      value: value,
      min: min,
      max: max,
      isVertical: isVertical,
      isHovered: isHovered,
      reversed: reversed,
      scaleTicks: scaleTicks,
      showRangeValues: showRangeValues,
      showScale: showScale,
      showCurrentValue: showCurrentValue,
      currentValueVisibility: currentValueVisibility,
      label: label,
      labelContentLeft: labelContentLeft,
      labelContent: labelContent,
      labelPlacement: labelPlacement,
      sliderAlign: sliderAlign,
      rangeValuesPlacementOld: rangeValuesPlacementOld,
      scaleAlign: scaleAlign,
      pointerSize: pointerSize,
      pointerVisibility: pointerVisibility,
      valuePlacement: valuePlacement
    }),
    innerShowScale = _getSingleSliderLayou.innerShowScale,
    innerShowCurrentValue = _getSingleSliderLayou.innerShowCurrentValue,
    hasLabelContent = _getSingleSliderLayou.hasLabelContent,
    labelPlacementClass = _getSingleSliderLayou.labelPlacementClass,
    rangeValuesPlacement = _getSingleSliderLayou.rangeValuesPlacement,
    scaleAlignClass = _getSingleSliderLayou.scaleAlignClass,
    labelVerticalPlacement = _getSingleSliderLayou.labelVerticalPlacement,
    showPointer = _getSingleSliderLayou.showPointer,
    currentValueStyle = _getSingleSliderLayou.currentValueStyle,
    progressSizeStyle = _getSingleSliderLayou.progressSizeStyle,
    rangeMinValueOpacity = _getSingleSliderLayou.rangeMinValueOpacity,
    rangeMaxValueOpacity = _getSingleSliderLayou.rangeMaxValueOpacity;
  var emitChange = function emitChange(newValue) {
    if (!onChange) return;
    if (outerValue !== undefined || !name) {
      onChange(newValue);
      return;
    }
    onChange({
      target: {
        value: newValue,
        name: name
      }
    });
  };
  var handleTickClick = function handleTickClick(tick) {
    if (disabled) {
      return;
    }
    var clamped = clamp(tick, min, max);
    if (outerValue === undefined) {
      setDragValue(clamped);
    }
    emitChange(clamped);
    if (onChangeCommitted) {
      onChangeCommitted(clamped);
    }
  };
  var _useRangeHandlers = useRangeHandlers.useRangeHandlers({
      min: min,
      max: max,
      value: value,
      step: step,
      multipleStepSize: multipleStepSize,
      isControlled: outerValue !== undefined,
      onSetValue: setDragValue,
      onEmit: emitChange,
      onCommit: onChangeCommitted
    }),
    handleChange = _useRangeHandlers.handleChange,
    handleChangeCommitted = _useRangeHandlers.handleChangeCommitted,
    handleKeyDown = _useRangeHandlers.handleKeyDown;
  return /*#__PURE__*/React__default.default.createElement(Single_styles.SingleWrapper, {
    className: cls__default.default(labelPlacementClass, scaleAlignClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, Slider_tokens.classes.verticalOrientation, isVertical), Slider_tokens.classes.labelContentReversed, labelReversed), Slider_tokens.classes.labelPlacementBottom, labelVerticalPlacement === 'bottom'), Slider_tokens.classes.labelAlignRight, sliderAlign === 'left'), Slider_tokens.classes.labelAlignLeft, sliderAlign === 'right'), Slider_tokens.classes.labelAlignCenter, (sliderAlign === 'center' || sliderAlign === 'none') && !scaleTicks), Slider_tokens.classes.scalePlacementTop, scaleAlign === 'top'), Slider_tokens.classes.pointerHidden, !showPointer)),
    hasTicks: Boolean(scaleTicks),
    onPointerEnter: function onPointerEnter() {
      return setIsHovered(true);
    },
    onPointerLeave: function onPointerLeave() {
      return setIsHovered(false);
    }
  }, hasLabelContent && /*#__PURE__*/React__default.default.createElement(SliderBase_styles.LabelWrapper, null, (labelContentLeft || labelContent) && /*#__PURE__*/React__default.default.createElement(Single_styles.LabelContent, null, labelContent), label && /*#__PURE__*/React__default.default.createElement(SliderBase_styles.Label, null, label)), /*#__PURE__*/React__default.default.createElement(Single_styles.SliderBaseWrapper, {
    className: cls__default.default(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, Slider_tokens.classes.verticalOrientation, isVertical), Slider_tokens.classes.rangeValuesPlacementInner, !isVertical && rangeValuesPlacement !== 'outer'), Slider_tokens.classes.rangeValuesPlacementOuter, !isVertical && rangeValuesPlacement === 'outer'), Slider_tokens.classes.scalePlacementTop, scaleAlign === 'top'))
  }, innerShowScale && /*#__PURE__*/React__default.default.createElement(Single_styles.StyledRangeValue, {
    className: cls__default.default(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, Slider_tokens.classes.hideMinValue, showCurrentValue && (reversed ? hideMaxValueDiff && max - value <= hideMaxValueDiff : hideMinValueDiff && value - min <= hideMinValueDiff)), Slider_tokens.classes.activeRangeValue, value === min)),
    style: {
      opacity: rangeMinValueOpacity
    }
  }, reversed ? max : min), /*#__PURE__*/React__default.default.createElement(Single_styles.SliderContainer, _rollupPluginBabelHelpers.extends({
    className: cls__default.default(isVertical && Slider_tokens.classes.verticalOrientation, reversed && Slider_tokens.classes.reversed, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, Slider_tokens.classes.valuePlacementNone, valuePlacement === 'none'), Slider_tokens.classes.valuePlacementLeft, valuePlacement === 'left'), Slider_tokens.classes.valuePlacementRight, valuePlacement === 'right'), Slider_tokens.classes.valuePlacementTop, valuePlacement === 'top'), Slider_tokens.classes.valuePlacementBottom, valuePlacement === 'bottom'))
  }, rest), _StyledTrack || (_StyledTrack = /*#__PURE__*/React__default.default.createElement(Single_styles.StyledTrack, null)), /*#__PURE__*/React__default.default.createElement(Single_styles.StyledProgress, {
    style: progressSizeStyle
  }), /*#__PURE__*/React__default.default.createElement(Single_styles.StyledRange, {
    type: "range",
    name: name,
    value: value,
    min: min,
    max: max,
    step: step,
    disabled: disabled,
    showPointer: showPointer,
    datatype: "slider-single",
    "aria-label": ariaLabel,
    "aria-valuemin": min,
    "aria-valuemax": max,
    "aria-valuenow": value,
    "aria-orientation": orientation,
    onChange: handleChange,
    onMouseUp: handleChangeCommitted,
    onTouchEnd: handleChangeCommitted,
    onKeyUp: handleChangeCommitted,
    onKeyDown: handleKeyDown
  }), innerShowCurrentValue && /*#__PURE__*/React__default.default.createElement(Single_styles.StyledCurrentValue, {
    style: currentValueStyle
  }, value)), innerShowScale && /*#__PURE__*/React__default.default.createElement(Single_styles.StyledRangeValue, {
    className: cls__default.default(Slider_tokens.classes.maxRangeValue, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, Slider_tokens.classes.hideMaxValue, showCurrentValue && (reversed ? hideMinValueDiff && value - min <= hideMinValueDiff : hideMaxValueDiff && max - value <= hideMaxValueDiff)), Slider_tokens.classes.activeRangeValue, value === max)),
    style: {
      opacity: rangeMaxValueOpacity
    }
  }, reversed ? min : max), scaleTicks && /*#__PURE__*/React__default.default.createElement(Single_styles.ScaleTicksWrapper, {
    isVertical: isVertical,
    reversed: reversed
  }, scaleTicks.map(function (tick) {
    var tickStyle = getTickStyle.getTickStyle({
      tick: tick,
      min: min,
      max: max,
      isVertical: isVertical,
      reversed: reversed !== null && reversed !== void 0 ? reversed : false
    });
    return /*#__PURE__*/React__default.default.createElement(Single_styles.ScaleTick, {
      key: tick,
      tickValue: tick,
      isVertical: isVertical,
      sliderAlign: sliderAlign,
      scaleAlign: scaleAlign,
      style: tickStyle,
      onClick: function onClick() {
        return handleTickClick(tick);
      }
    }, /*#__PURE__*/React__default.default.createElement(Single_styles.ScaleTickDot, {
      isVertical: isVertical,
      filled: tick <= value,
      reversed: reversed,
      scaleAlign: scaleAlign,
      sliderAlign: sliderAlign
    }));
  }))));
};

exports.SingleSlider = SingleSlider;
