import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends, defineProperty as _defineProperty } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useState, useRef, useCallback, useEffect } from 'react';
import cls from 'classnames';
import { SliderBase } from '../SliderBase/SliderBase.js';
import { sizeData } from '../../utils/index.js';
import { classes } from '../../Slider.tokens.js';
import { InputHidden } from '../SliderBase/SliderBase.styles.js';
import { DoubleWrapper, LabelWrapper, LabelContentLeft, Label, SliderWrapper, InputsWrapper, StyledInput } from './Double.styles.js';
import { noop } from '../../../../utils/noop.js';
import { isNumber } from '../../../../utils/isNumber.js';
import { Handler } from '../../ui/Handler/Handler.js';

var _excluded = ["min", "max", "value", "disabled", "label", "labelContentLeft", "size", "pointerSize", "onChangeCommitted", "onChangeTextField", "onBlurTextField", "onKeyDownTextField", "onChange", "ariaLabel", "multipleStepSize", "name"];
function getXCenterHandle(handle) {
  var _handle$parentElement;
  var containerX = ((_handle$parentElement = handle.parentElement) === null || _handle$parentElement === void 0 || (_handle$parentElement = _handle$parentElement.getBoundingClientRect()) === null || _handle$parentElement === void 0 ? void 0 : _handle$parentElement.x) || 0;
  var handleRect = handle.getBoundingClientRect();
  var handlePosition = handleRect.x;
  return handlePosition - containerX;
}
var DoubleSlider = function DoubleSlider(_ref) {
  var min = _ref.min,
    max = _ref.max,
    value = _ref.value,
    disabled = _ref.disabled,
    label = _ref.label,
    labelContentLeft = _ref.labelContentLeft,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 'm' : _ref$size,
    _ref$pointerSize = _ref.pointerSize,
    pointerSize = _ref$pointerSize === void 0 ? 'small' : _ref$pointerSize,
    onChangeCommitted = _ref.onChangeCommitted,
    onChangeTextField = _ref.onChangeTextField,
    onBlurTextField = _ref.onBlurTextField,
    onKeyDownTextField = _ref.onKeyDownTextField,
    onChange = _ref.onChange,
    ariaLabel = _ref.ariaLabel,
    _ref$multipleStepSize = _ref.multipleStepSize,
    multipleStepSize = _ref$multipleStepSize === void 0 ? 10 : _ref$multipleStepSize,
    name = _ref.name,
    rest = _objectWithoutProperties(_ref, _excluded);
  var _useState = useState({
      stepSize: 0,
      railFillWidth: 0,
      railFillXPosition: 0,
      xFirstHandle: 0,
      xSecondHandle: 0,
      firstHandleZIndex: 100,
      secondHandleZIndex: 101,
      firstValue: value[0],
      secondValue: value[1]
    }),
    _useState2 = _slicedToArray(_useState, 2),
    state = _useState2[0],
    setState = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    firstInputHovered = _useState4[0],
    setFirstInputHovered = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    firstInputFocused = _useState6[0],
    setFirstInputFocused = _useState6[1];
  var _useState7 = useState(false),
    _useState8 = _slicedToArray(_useState7, 2),
    secondInputHovered = _useState8[0],
    setSecondInputHovered = _useState8[1];
  var _useState9 = useState(false),
    _useState10 = _slicedToArray(_useState9, 2),
    secondInputFocused = _useState10[0],
    setSecondInputFocused = _useState10[1];
  var _useState11 = useState(value[0]),
    _useState12 = _slicedToArray(_useState11, 2),
    firstValue = _useState12[0],
    setFirstValue = _useState12[1];
  var _useState13 = useState(value[1]),
    _useState14 = _slicedToArray(_useState13, 2),
    secondValue = _useState14[0],
    setSecondValue = _useState14[1];
  var handleClicked = useRef(false);
  var firstHandleRef = useRef(null);
  var secondHandleRef = useRef(null);
  var firstHandleValue = useRef(value[0]);
  var secondHandleValue = useRef(value[1]);
  var innerRefFirst = useRef(null);
  var innerRefSecond = useRef(null);
  var stepSize = state.stepSize;
  var hasLabelContent = label || labelContentLeft;
  var setStepSize = useCallback(function (newStepSize) {
    setState(function (prevState) {
      return _objectSpread2(_objectSpread2({}, prevState), {}, {
        stepSize: newStepSize
      });
    });
  }, [setState]);
  var onFirstHandleChange = function onFirstHandleChange(handleValue, data) {
    if (!(secondHandleRef !== null && secondHandleRef !== void 0 && secondHandleRef.current)) {
      return;
    }
    var newHandleXPosition = data.x;
    var secondHandleXPosition = getXCenterHandle(secondHandleRef.current);
    var fillWidth = secondHandleXPosition - newHandleXPosition;
    firstHandleValue.current = handleValue;
    setFirstValue(handleValue);
    setState(function (prevState) {
      return _objectSpread2(_objectSpread2({}, prevState), {}, {
        firstHandleZIndex: 101,
        secondHandleZIndex: 100,
        railFillWidth: fillWidth < 0 ? 0 : fillWidth,
        railFillXPosition: newHandleXPosition
      });
    });
    if (onChange) {
      onChange([handleValue, value[1]]);
    }
  };
  var onFirstHandleChangeCommitted = function onFirstHandleChangeCommitted(handleValue, data) {
    if (!(secondHandleRef !== null && secondHandleRef !== void 0 && secondHandleRef.current)) {
      return;
    }
    var newHandleXPosition = data.x;
    var secondHandleXPosition = getXCenterHandle(secondHandleRef.current);
    var fillWidth = secondHandleXPosition - newHandleXPosition;
    firstHandleValue.current = handleValue;
    setFirstValue(handleValue);
    if (onChangeCommitted) {
      onChangeCommitted([handleValue, value[1]]);
    }
    setState(function (prevState) {
      return _objectSpread2(_objectSpread2({}, prevState), {}, {
        firstValue: handleValue,
        xFirstHandle: data.x,
        railFillWidth: fillWidth < 0 ? 0 : fillWidth,
        railFillXPosition: newHandleXPosition
      });
    });
  };
  var onFirstTextfieldChange = function onFirstTextfieldChange(event) {
    if (!isNumber(event.target.value)) {
      return;
    }
    var handleValue = Number(event.target.value);
    setFirstValue(handleValue);
    if (onChangeTextField) {
      onChangeTextField([handleValue, secondValue], event);
    }
  };
  var onFirstTextfieldBlur = function onFirstTextfieldBlur(event) {
    setFirstInputFocused(false);
    setFirstInputHovered(false);
    if (!isNumber(event.target.value)) {
      return;
    }
    var handleValue = Number(event.target.value);
    setFirstValue(handleValue);
    if (onBlurTextField) {
      onBlurTextField && onBlurTextField([handleValue, secondValue], event);
    }
  };
  var onSecondHandleChange = function onSecondHandleChange(handleValue, data) {
    if (!(firstHandleRef !== null && firstHandleRef !== void 0 && firstHandleRef.current)) {
      return;
    }
    var firstXHandleXPosition = getXCenterHandle(firstHandleRef.current);
    var newHandleXPosition = data.x;
    var fillWidth = newHandleXPosition - firstXHandleXPosition;
    secondHandleValue.current = handleValue;
    setSecondValue(handleValue);
    setState(function (prevState) {
      return _objectSpread2(_objectSpread2({}, prevState), {}, {
        firstHandleZIndex: 100,
        secondHandleZIndex: 101,
        railFillWidth: fillWidth < 0 ? 0 : fillWidth,
        railFillXPosition: firstXHandleXPosition
      });
    });
    if (onChange) {
      onChange([value[0], handleValue]);
    }
  };
  var onSecondHandleChangeCommitted = function onSecondHandleChangeCommitted(handleValue, data) {
    if (!(firstHandleRef !== null && firstHandleRef !== void 0 && firstHandleRef.current)) {
      return;
    }
    var firstXHandleXPosition = getXCenterHandle(firstHandleRef.current);
    var newHandleXPosition = data.x;
    var fillWidth = newHandleXPosition - firstXHandleXPosition;
    secondHandleValue.current = handleValue;
    if (onChangeCommitted) {
      onChangeCommitted([value[0], handleValue]);
    }
    setSecondValue(handleValue);
    setState(function (prevState) {
      return _objectSpread2(_objectSpread2({}, prevState), {}, {
        secondValue: handleValue,
        xSecondHandle: data.x,
        railFillWidth: fillWidth < 0 ? 0 : fillWidth,
        railFillXPosition: firstXHandleXPosition
      });
    });
  };
  var onSecondTextfieldChange = function onSecondTextfieldChange(event) {
    if (!isNumber(event.target.value)) {
      return;
    }
    var handleValue = Number(event.target.value);
    setSecondValue(handleValue);
    if (onChangeTextField) {
      onChangeTextField([firstValue, handleValue], event);
    }
  };
  var onSecondTextfieldBlur = function onSecondTextfieldBlur(event) {
    setSecondInputFocused(false);
    setSecondInputHovered(false);
    if (!isNumber(event.target.value)) {
      return;
    }
    var handleValue = Number(event.target.value);
    setSecondValue(handleValue);
    if (onBlurTextField) {
      onBlurTextField([firstValue, handleValue], event);
    }
  };
  var onTextfieldKeyDown = function onTextfieldKeyDown(event) {
    if (onKeyDownTextField) {
      onKeyDownTextField([firstValue, secondValue], event);
    }
  };
  var _ref2 = ariaLabel || [],
    _ref3 = _slicedToArray(_ref2, 2),
    ariaLabelLeft = _ref3[0],
    ariaLabelRight = _ref3[1];
  var currentFirstSliderValue = Math.max(state.firstValue, min);
  var settings = sizeData[size][pointerSize === 'large' ? 'large' : 'small'];
  useEffect(function () {
    var firstLocalValue = Math.min(Math.max(value[0], min), max) - min;
    var secondLocalValue = Math.min(Math.max(value[1], min), max) - min;
    setFirstValue(value[0]);
    setSecondValue(value[1]);
    setState(function (prevState) {
      return _objectSpread2(_objectSpread2({}, prevState), {}, {
        railFillXPosition: stepSize * firstLocalValue,
        railFillWidth: stepSize * secondLocalValue - stepSize * firstLocalValue,
        xFirstHandle: stepSize * firstLocalValue,
        xSecondHandle: stepSize * secondLocalValue
      });
    });
  }, [value, stepSize, min, max, setFirstValue, setSecondValue]);
  useEffect(function () {
    var onMouseUp = function onMouseUp() {
      if (handleClicked.current) {
        handleClicked.current = false;
        setFirstInputFocused(false);
        setSecondInputFocused(false);
      }
    };
    window.addEventListener('mouseup', onMouseUp);
    return function () {
      window.removeEventListener('mouseup', onMouseUp);
    };
  }, []);
  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(SliderBase, _extends({
    min: min,
    max: max,
    size: size,
    disabled: disabled,
    setStepSize: setStepSize,
    railFillWidth: state.railFillWidth,
    settings: settings,
    railFillXPosition: state.railFillXPosition,
    orientation: "horizontal"
  }, rest), /*#__PURE__*/React__default.createElement(Handler, {
    ref: firstHandleRef,
    size: pointerSize,
    stepSize: state.stepSize,
    multipleStepSize: multipleStepSize,
    onChangeCommitted: onFirstHandleChangeCommitted,
    onChange: onFirstHandleChange,
    min: min,
    max: state.secondValue,
    disabled: disabled,
    bounds: [min, state.secondValue],
    side: "left",
    orientation: "horizontal",
    position: state.xFirstHandle,
    zIndex: state.firstHandleZIndex,
    value: currentFirstSliderValue,
    ariaLabel: ariaLabelLeft,
    onTouchStart: function onTouchStart() {
      handleClicked.current = true;
      setFirstInputFocused(true);
    },
    onTouchEnd: function onTouchEnd() {
      handleClicked.current = false;
      setFirstInputFocused(false);
    },
    onMouseDown: function onMouseDown() {
      handleClicked.current = true;
      setFirstInputFocused(true);
    },
    onMouseEnter: function onMouseEnter() {
      return setFirstInputHovered(true);
    },
    onMouseLeave: function onMouseLeave() {
      return setFirstInputHovered(false);
    }
  }), /*#__PURE__*/React__default.createElement(Handler, {
    ref: secondHandleRef,
    size: pointerSize,
    stepSize: state.stepSize,
    multipleStepSize: multipleStepSize,
    onChangeCommitted: onSecondHandleChangeCommitted,
    onChange: onSecondHandleChange,
    min: min,
    ariaValueMin: currentFirstSliderValue,
    max: max,
    disabled: disabled,
    bounds: [state.firstValue, max],
    side: "right",
    orientation: "horizontal",
    position: state.xSecondHandle,
    zIndex: state.secondHandleZIndex,
    value: Math.max(state.secondValue, min),
    ariaLabel: ariaLabelRight,
    onTouchStart: function onTouchStart() {
      handleClicked.current = true;
      setSecondInputFocused(true);
    },
    onTouchEnd: function onTouchEnd() {
      handleClicked.current = false;
      setSecondInputFocused(false);
    },
    onMouseDown: function onMouseDown() {
      handleClicked.current = true;
      setSecondInputFocused(true);
    },
    onMouseEnter: function onMouseEnter() {
      return setSecondInputHovered(true);
    },
    onMouseLeave: function onMouseLeave() {
      return setSecondInputHovered(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)),
    enumerationType: "plain",
    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)),
    enumerationType: "plain",
    disabled: disabled,
    value: secondValue,
    onChange: onSecondTextfieldChange,
    onFocus: function onFocus() {
      return setSecondInputFocused(true);
    },
    onBlur: onSecondTextfieldBlur,
    onKeyDown: onTextfieldKeyDown
  }))), /*#__PURE__*/React__default.createElement(InputHidden, _extends({
    name: name,
    type: "number",
    datatype: "slider-double",
    "data-slidertype": "min",
    value: firstValue,
    ref: innerRefFirst
  }, noop)), /*#__PURE__*/React__default.createElement(InputHidden, _extends({
    name: name,
    type: "number",
    datatype: "slider-double",
    "data-slidertype": "max",
    value: secondValue,
    ref: innerRefSecond
  }, noop)));
};

export { DoubleSlider };
//# sourceMappingURL=Double.js.map
