import React, { useCallback, useMemo } from 'react';
import cls from 'classnames';
import { Message } from '../message';
import { RangeSlider } from '../range-slider';
import { Input } from '../input';
import { Tooltip } from '../tooltip';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const navigationKeys = new Set(['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'Enter', 'Escape', 'End', 'Home', 'Delete', 'Backspace', 'Tab']);
/**
 * @uxr-only-supported
 * @midnight-gray-supported
 * @alpine-light-supported
 * */
function InputSlider({
  label,
  labelIcon = null,
  labelIconTooltipText = '',
  labelIconTestId = '',
  helperText,
  validity,
  testId,
  inputProps = {},
  sanitize,
  value,
  onChange,
  step,
  ...props
}) {
  const multiplier = !!step && step < 1 ? 1 / step : 1;
  const valueOrMin = value ?? props.min;
  const valueOrEmpty = value ?? '';
  const rangeSliderComputedProps = useMemo(() => !!step ? {
    min: props.min * multiplier,
    max: props.max * multiplier,
    onValuesUpdated: ({
      values
    }) => {
      onChange(values[0] / multiplier);
    },
    values: [valueOrMin * multiplier]
  } : {
    onValuesUpdated: ({
      values
    }) => onChange(values[0]),
    values: [valueOrMin * multiplier]
  }, [props.max, props.min, step, multiplier, valueOrMin, onChange]);
  const negativeAllowed = props.min < 0;
  const currentValue = value ?? props.min;
  const prevValue = currentValue.toString();
  const sliderTestId = testId ? `${testId}-range-slider` : 'range-slider';
  const onKeyDownHandler = useCallback(event => {
    if (event.metaKey || navigationKeys.has(event.key)) {
      return;
    }
    if (!!sanitize && !sanitize.onKeyDown({
      value: event.key,
      prevValue: event.target.value,
      negativeAllowed
    })) {
      event.preventDefault();
    }
  }, [sanitize, negativeAllowed]);
  const onChangeHandler = useCallback(event => {
    const {
      target
    } = event;
    if (sanitize) {
      const sanitizedValue = sanitize.onChange({
        value: target.value,
        prevValue,
        negativeAllowed
      });
      const nextValue = sanitizedValue ? Number(sanitizedValue) : currentValue;
      onChange(nextValue);
    } else {
      const nextValueAsNumber = Number(target.valueAsNumber);
      if (Number.isNaN(nextValueAsNumber)) {
        onChange(undefined);
      } else {
        onChange(nextValueAsNumber);
      }
    }
  }, [sanitize?.onChange, currentValue]);
  const onPasteHandler = useCallback(event => {
    if (!event.clipboardData.types.includes('text/plain')) {
      return;
    }
    const nextValue = event.clipboardData.getData('text/plain');
    if (!nextValue) {
      return;
    }
    if (sanitize) {
      const sanitizedText = sanitize.onChange({
        value: nextValue,
        prevValue,
        negativeAllowed
      });
      const sanitizedValue = sanitizedText ? Number(sanitizedText) : currentValue;
      event.preventDefault();
      onChange(sanitizedValue);
    } else {
      const nextValueAsNumber = Number(nextValue);
      onChange(Number.isNaN(nextValueAsNumber) ? undefined : nextValueAsNumber);
    }
  }, [sanitize, negativeAllowed, prevValue, multiplier, currentValue]);
  return /*#__PURE__*/_jsxs("div", {
    "test-id": testId,
    className: cls('input-slider', props.isDisabled && 'disabled'),
    children: [label && /*#__PURE__*/_jsxs("label", {
      id: `${inputProps.id}-label`,
      htmlFor: inputProps.id,
      className: "input-slider-label",
      children: [label, labelIcon && /*#__PURE__*/_jsx(Tooltip, {
        content: labelIconTooltipText,
        children: /*#__PURE__*/_jsx("span", {
          children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
            icon: labelIcon,
            "test-id": labelIconTestId,
            className: "margin-left-1"
          })
        })
      })]
    }), helperText && /*#__PURE__*/_jsx("p", {
      className: "input-slider-helper-text",
      children: helperText
    }), /*#__PURE__*/_jsxs("div", {
      className: "input-slider-container",
      children: [/*#__PURE__*/_jsx(RangeSlider, {
        ...props,
        ...rangeSliderComputedProps,
        testId: sliderTestId,
        ariaLabelledBy: `${inputProps.id}-label`
      }), /*#__PURE__*/_jsx(Input, {
        type: "number",
        fieldTestId: "range-slider-input",
        isDisabled: props.isDisabled,
        validity: validity,
        onChange: onChangeHandler,
        onPaste: !!sanitize ? onPasteHandler : undefined,
        onKeyDown: !!sanitize ? onKeyDownHandler : undefined,
        value: valueOrEmpty,
        min: props.min,
        max: props.max,
        step: step,
        ...inputProps,
        className: cls('range-slider-input', inputProps.className)
      })]
    }), validity?.value?.map(text => /*#__PURE__*/_jsx(Message, {
      type: validity.type,
      size: "sm",
      children: text
    }, text))]
  });
}
export default InputSlider;