import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useState, useRef, useCallback } from 'react';
import cls from 'classnames';
import { classes } from '../../Slider.tokens.js';
import { useRangeHandlers } from '../../hooks/useRangeHandlers.js';
import { useDoubleTextFieldHandlers } from '../../hooks/useDoubleTextFieldHandlers.js';
import { DoubleWrapper, LabelWrapper, LabelContentLeft, SliderWrapper, SliderContainer, StyledTrack, StyledDoubleProgress, StyledRange, InputsWrapper, StyledInput } from './Double.styles.js';
import { Label } from '../SliderBase/SliderBase.styles.js';

var _StyledTrack;
var _excluded = ["min", "max", "value", "defaultValue", "name", "step", "label", "labelContentLeft", "multipleStepSize", "disabled", "onChange", "onChangeCommitted", "onChangeTextField", "onBlurTextField", "onKeyDownTextField", "ariaLabel"];
var clamp = function clamp(value, min, max) {
  return Math.max(min, Math.min(value, max));
};
var DoubleSlider = function DoubleSlider(_ref) {
  var _clampedDefaultValue$, _clampedDefaultValue$2, _clampedOuterValue$, _clampedOuterValue$2;
  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,
    _ref$multipleStepSize = _ref.multipleStepSize,
    multipleStepSize = _ref$multipleStepSize === void 0 ? 10 : _ref$multipleStepSize,
    disabled = _ref.disabled,
    onChange = _ref.onChange,
    onChangeCommitted = _ref.onChangeCommitted,
    onChangeTextField = _ref.onChangeTextField,
    onBlurTextField = _ref.onBlurTextField,
    onKeyDownTextField = _ref.onKeyDownTextField,
    ariaLabel = _ref.ariaLabel,
    rest = _objectWithoutProperties(_ref, _excluded);
  var isControlled = outerValue !== undefined;
  var clampedOuterValue = outerValue !== undefined ? [clamp(outerValue[0], min, max), clamp(outerValue[1], min, max)] : undefined;
  var clampedDefaultValue = defaultValue !== undefined ? [clamp(defaultValue[0], min, max), clamp(defaultValue[1], min, max)] : undefined;
  var _useState = useState([(_clampedDefaultValue$ = clampedDefaultValue === null || clampedDefaultValue === void 0 ? void 0 : clampedDefaultValue[0]) !== null && _clampedDefaultValue$ !== void 0 ? _clampedDefaultValue$ : min, (_clampedDefaultValue$2 = clampedDefaultValue === null || clampedDefaultValue === void 0 ? void 0 : clampedDefaultValue[1]) !== null && _clampedDefaultValue$2 !== void 0 ? _clampedDefaultValue$2 : max]),
    _useState2 = _slicedToArray(_useState, 2),
    dragValue = _useState2[0],
    setDragValue = _useState2[1];
  var firstValue = (_clampedOuterValue$ = clampedOuterValue === null || clampedOuterValue === void 0 ? void 0 : clampedOuterValue[0]) !== null && _clampedOuterValue$ !== void 0 ? _clampedOuterValue$ : dragValue[0];
  var secondValue = (_clampedOuterValue$2 = clampedOuterValue === null || clampedOuterValue === void 0 ? void 0 : clampedOuterValue[1]) !== null && _clampedOuterValue$2 !== void 0 ? _clampedOuterValue$2 : dragValue[1];

  // z-index: последний взаимодействовавший ползунок — наверху
  var _useState3 = useState('second'),
    _useState4 = _slicedToArray(_useState3, 2),
    activeHandle = _useState4[0],
    setActiveHandle = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    firstInputHovered = _useState6[0],
    setFirstInputHovered = _useState6[1];
  var _useState7 = useState(false),
    _useState8 = _slicedToArray(_useState7, 2),
    firstInputFocused = _useState8[0],
    setFirstInputFocused = _useState8[1];
  var _useState9 = useState(false),
    _useState0 = _slicedToArray(_useState9, 2),
    secondInputHovered = _useState0[0],
    setSecondInputHovered = _useState0[1];
  var _useState1 = useState(false),
    _useState10 = _slicedToArray(_useState1, 2),
    secondInputFocused = _useState10[0],
    setSecondInputFocused = _useState10[1];
  var innerRefFirst = useRef(null);
  var innerRefSecond = useRef(null);
  var hasLabelContent = label || labelContentLeft;
  var _ref2 = ariaLabel || [],
    _ref3 = _slicedToArray(_ref2, 2),
    ariaLabelLeft = _ref3[0],
    ariaLabelRight = _ref3[1];

  // Позиция и ширина заливки между ползунками (inline style)
  var firstPercent = (firstValue - min) / (max - min);
  var secondPercent = (secondValue - min) / (max - min);
  var doubleProgressStyle = {
    left: "calc(".concat(firstPercent, " * 100%)"),
    width: "calc(".concat(secondPercent - firstPercent, " * 100%)")
  };
  var sortValues = useCallback(function (values) {
    return values.map(function (val) {
      return Math.min(Math.max(val, min), max);
    }).sort(function (a, b) {
      return a - b;
    });
  }, [min, max]);
  var emitChange = function emitChange(values) {
    if (!onChange) return;
    if (!isControlled && name) {
      onChange({
        target: {
          value: values.join(' - '),
          name: name
        }
      });
    } else {
      onChange(values);
    }
  };

  // ─── Первый ползунок ────────────────────────────────────────────────────────

  var _useRangeHandlers = useRangeHandlers({
      min: min,
      max: secondValue,
      // первый не может выйти за второй
      value: firstValue,
      step: step,
      multipleStepSize: multipleStepSize,
      isControlled: isControlled,
      onSetValue: function onSetValue(v) {
        return setDragValue(function (prev) {
          return [Math.min(v, secondValue), prev[1]];
        });
      },
      onEmit: function onEmit(v) {
        return emitChange([Math.min(v, secondValue), secondValue]);
      },
      onCommit: function onCommit(v) {
        return onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted([Math.min(v, secondValue), secondValue]);
      }
    }),
    handleFirstChange = _useRangeHandlers.handleChange,
    handleFirstChangeCommitted = _useRangeHandlers.handleChangeCommitted,
    handleFirstKeyDown = _useRangeHandlers.handleKeyDown;

  // ─── Второй ползунок ────────────────────────────────────────────────────────

  var _useRangeHandlers2 = useRangeHandlers({
      min: firstValue,
      // второй не может опуститься ниже первого
      max: max,
      value: secondValue,
      step: step,
      multipleStepSize: multipleStepSize,
      isControlled: isControlled,
      onSetValue: function onSetValue(v) {
        return setDragValue(function (prev) {
          return [prev[0], Math.max(v, firstValue)];
        });
      },
      onEmit: function onEmit(v) {
        return emitChange([firstValue, Math.max(v, firstValue)]);
      },
      onCommit: function onCommit(v) {
        return onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted([firstValue, Math.max(v, firstValue)]);
      }
    }),
    handleSecondChange = _useRangeHandlers2.handleChange,
    handleSecondChangeCommitted = _useRangeHandlers2.handleChangeCommitted,
    handleSecondKeyDown = _useRangeHandlers2.handleKeyDown;

  // ─── Text fields ────────────────────────────────────────────────────────────

  var _useDoubleTextFieldHa = useDoubleTextFieldHandlers({
      isControlled: isControlled,
      firstValue: firstValue,
      secondValue: secondValue,
      setDragValue: setDragValue,
      sortValues: sortValues,
      emitChange: emitChange,
      onChangeTextField: onChangeTextField,
      onBlurTextField: onBlurTextField,
      onKeyDownTextField: onKeyDownTextField,
      name: name,
      setFirstInputFocused: setFirstInputFocused,
      setFirstInputHovered: setFirstInputHovered,
      setSecondInputFocused: setSecondInputFocused,
      setSecondInputHovered: setSecondInputHovered
    }),
    onFirstTextfieldChange = _useDoubleTextFieldHa.onFirstTextfieldChange,
    onFirstTextfieldBlur = _useDoubleTextFieldHa.onFirstTextfieldBlur,
    onSecondTextfieldChange = _useDoubleTextFieldHa.onSecondTextfieldChange,
    onSecondTextfieldBlur = _useDoubleTextFieldHa.onSecondTextfieldBlur,
    onTextfieldKeyDown = _useDoubleTextFieldHa.onTextfieldKeyDown;
  return /*#__PURE__*/React__default.createElement(DoubleWrapper, null, hasLabelContent && /*#__PURE__*/React__default.createElement(LabelWrapper, null, labelContentLeft && /*#__PURE__*/React__default.createElement(LabelContentLeft, null, labelContentLeft), label && /*#__PURE__*/React__default.createElement(Label, null, label)), /*#__PURE__*/React__default.createElement(SliderWrapper, null, /*#__PURE__*/React__default.createElement(SliderContainer, rest, _StyledTrack || (_StyledTrack = /*#__PURE__*/React__default.createElement(StyledTrack, null)), /*#__PURE__*/React__default.createElement(StyledDoubleProgress, {
    style: doubleProgressStyle
  }), /*#__PURE__*/React__default.createElement(StyledRange, {
    type: "range",
    ref: innerRefFirst,
    value: firstValue,
    name: name,
    min: min,
    max: max,
    step: step,
    disabled: disabled,
    "aria-label": ariaLabelLeft,
    "aria-valuemin": min,
    "aria-valuemax": secondValue,
    "aria-valuenow": firstValue,
    datatype: "slider-double",
    "data-slidertype": "min",
    style: {
      zIndex: activeHandle === 'first' ? 2 : 1
    },
    onChange: handleFirstChange,
    onMouseUp: handleFirstChangeCommitted,
    onTouchEnd: handleFirstChangeCommitted,
    onKeyUp: handleFirstChangeCommitted,
    onKeyDown: handleFirstKeyDown,
    onMouseDown: function onMouseDown() {
      setActiveHandle('first');
      setFirstInputFocused(true);
    },
    onTouchStart: function onTouchStart() {
      setActiveHandle('first');
      setFirstInputFocused(true);
    },
    onMouseEnter: function onMouseEnter() {
      return setFirstInputHovered(true);
    },
    onMouseLeave: function onMouseLeave() {
      return setFirstInputHovered(false);
    },
    onFocus: function onFocus() {
      return setFirstInputFocused(true);
    },
    onBlur: function onBlur() {
      return setFirstInputFocused(false);
    }
  }), /*#__PURE__*/React__default.createElement(StyledRange, {
    type: "range",
    ref: innerRefSecond,
    value: secondValue,
    name: name,
    min: min,
    max: max,
    step: step,
    disabled: disabled,
    "aria-label": ariaLabelRight,
    "aria-valuemin": firstValue,
    "aria-valuemax": max,
    "aria-valuenow": secondValue,
    datatype: "slider-double",
    "data-slidertype": "max",
    style: {
      zIndex: activeHandle === 'second' ? 2 : 1
    },
    onChange: handleSecondChange,
    onMouseUp: handleSecondChangeCommitted,
    onTouchEnd: handleSecondChangeCommitted,
    onKeyUp: handleSecondChangeCommitted,
    onKeyDown: handleSecondKeyDown,
    onMouseDown: function onMouseDown() {
      setActiveHandle('second');
      setSecondInputFocused(true);
    },
    onTouchStart: function onTouchStart() {
      setActiveHandle('second');
      setSecondInputFocused(true);
    },
    onMouseEnter: function onMouseEnter() {
      return setSecondInputHovered(true);
    },
    onMouseLeave: function onMouseLeave() {
      return setSecondInputHovered(false);
    },
    onFocus: function onFocus() {
      return setSecondInputFocused(true);
    },
    onBlur: function onBlur() {
      return setSecondInputFocused(false);
    }
  })), /*#__PURE__*/React__default.createElement(InputsWrapper, null, /*#__PURE__*/React__default.createElement(StyledInput, {
    className: cls(classes.firstTextField, _defineProperty(_defineProperty({}, classes.textFieldHovered, !firstInputFocused && firstInputHovered && !disabled), classes.textFieldFocused, firstInputFocused && !disabled)),
    disabled: disabled,
    value: firstValue,
    onChange: onFirstTextfieldChange,
    onFocus: function onFocus() {
      return setFirstInputFocused(true);
    },
    onBlur: onFirstTextfieldBlur,
    onKeyDown: onTextfieldKeyDown
  }), /*#__PURE__*/React__default.createElement(StyledInput, {
    className: cls(classes.secondTextField, _defineProperty(_defineProperty({}, classes.textFieldHovered, !secondInputFocused && secondInputHovered && !disabled), classes.textFieldFocused, secondInputFocused && !disabled)),
    disabled: disabled,
    value: secondValue,
    onChange: onSecondTextfieldChange,
    onFocus: function onFocus() {
      return setSecondInputFocused(true);
    },
    onBlur: onSecondTextfieldBlur,
    onKeyDown: onTextfieldKeyDown
  }))));
};

export { DoubleSlider };
