import React from 'react';
import { getKnobSize } from '../Slider/utils';
import { SliderKnob } from '../Slider/SliderKnob';
import { clamp, percentToValue, roundValueToStep, valueToPercent } from './utils';
var SliderKnobHandler = function SliderKnobHandler(_ref) {
  var disabled = _ref.disabled,
    handleRef = _ref.handleRef,
    knobType = _ref.knobType,
    max = _ref.max,
    min = _ref.min,
    onChange = _ref.onChange,
    readOnly = _ref.readOnly,
    setActiveHandle = _ref.setActiveHandle,
    sliderColor = _ref.sliderColor,
    step = _ref.step,
    trackRef = _ref.trackRef,
    value = _ref.value,
    _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? 'big' : _ref$variant,
    zIndex = _ref.zIndex;
  var trackPercent = valueToPercent(value, min, max);
  var updateValue = function updateValue(newValue) {
    onChange(newValue);
  };
  var getNewValue = function getNewValue(pointerPosition) {
    var _trackRef$current;
    var trackClientRect = trackRef === null || trackRef === void 0 || (_trackRef$current = trackRef.current) === null || _trackRef$current === void 0 ? void 0 : _trackRef$current.getBoundingClientRect();
    if (!trackClientRect || !pointerPosition) {
      return null;
    }
    var left = trackClientRect.left,
      width = trackClientRect.width;
    var diff = pointerPosition - left;
    var percent = diff / width;
    var newValue = percentToValue(percent, min, max);
    var newValueRounded = roundValueToStep(newValue, step, min);
    return clamp(newValueRounded, min, max);
  };
  var handleChange = function handleChange(pointerPosition) {
    var _trackRef$current2;
    var trackClientRect = trackRef === null || trackRef === void 0 || (_trackRef$current2 = trackRef.current) === null || _trackRef$current2 === void 0 ? void 0 : _trackRef$current2.getBoundingClientRect();
    if (!disabled && !readOnly && trackClientRect) {
      var newValue = getNewValue(pointerPosition);
      if (newValue !== null) {
        updateValue(newValue);
      }
    }
  };
  var handleMouseMove = function handleMouseMove(event) {
    event.stopPropagation();
    event.preventDefault();
    handleChange(event.clientX);
  };
  var handleMouseUp = function handleMouseUp() {
    document.removeEventListener('mouseup', handleMouseUp);
    document.removeEventListener('mousemove', handleMouseMove);
  };
  var handleMouseDown = function handleMouseDown() {
    setActiveHandle(knobType);
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  };
  var handleTouchMove = function handleTouchMove(event) {
    event.stopPropagation();
    event.preventDefault();
    var touchPosition = event.touches[0].clientX;
    handleChange(touchPosition);
  };
  var handleTouchEnd = function handleTouchEnd() {
    document.removeEventListener('touchend', handleTouchEnd);
    document.removeEventListener('touchmove', handleTouchMove);
  };
  var handleTouchStart = function handleTouchStart() {
    document.addEventListener('touchmove', handleTouchMove);
    document.addEventListener('touchend', handleTouchEnd);
  };
  var handleKnobClick = function handleKnobClick(event) {
    event.stopPropagation();
  };
  var handleKeyDown = function handleKeyDown(event) {
    if (!disabled) {
      var increase = event.key && ['ArrowRight', 'ArrowUp'].includes(event.key);
      var decrease = event.key && ['ArrowLeft', 'ArrowDown'].includes(event.key);
      var newValue = value;
      if (increase) {
        newValue = value + step;
      }
      if (decrease) {
        newValue = value - step;
      }
      updateValue(clamp(newValue, min, max));
    }
  };
  return React.createElement(SliderKnob, {
    disabled: disabled,
    max: max,
    min: min,
    onClick: handleKnobClick,
    onKeyDown: handleKeyDown,
    onMouseDown: handleMouseDown,
    onMouseUp: handleMouseUp,
    onTouchStart: handleTouchStart,
    ref: handleRef,
    sliderColor: sliderColor,
    style: {
      left: "calc(".concat(trackPercent, "% - ").concat(getKnobSize(variant) / 2, "px)")
    },
    value: value,
    variant: variant,
    zIndex: zIndex
  });
};
export default SliderKnobHandler;