import classNames from "classnames";
import React, { useEffect, useState } from "react";
import {
  ACTION_COLOR_LIVESITE,
  BG_COLOR_LIVESITE,
  SLIDER_THUMB_VISIBILITY,
  SLIDER_TRACK_SIZE
} from "../consts.js";
import styles from "../statics/styles/slider-scss.js";
const Slider = ({
  min = 0,
  max = 10,
  tabIndex = 0,
  onChange,
  dataHook,
  ariaProps,
  value,
  onChangeCommitted,
  languageDir,
  thumbVisibility = SLIDER_THUMB_VISIBILITY.fixed,
  trackSize = SLIDER_TRACK_SIZE.medium,
  step,
  ariaLabel,
  disabled,
  className
}) => {
  const [fillPercentage, setFillPercentage] = useState(0);
  const track = {
    fill: ACTION_COLOR_LIVESITE,
    unFilled: BG_COLOR_LIVESITE,
    gradientDeg: languageDir === "rtl" ? "270deg" : "90deg"
  };
  const bgStyle = {
    background: `linear-gradient(${track.gradientDeg} ,${track.fill} ${fillPercentage}%, ${track.unFilled} ${fillPercentage + 0.1}%)`
  };
  const isFixedThumb = thumbVisibility === SLIDER_THUMB_VISIBILITY.fixed;
  const onKeyUp = (event) => {
    switch (event.key) {
      case "ArrowUp":
      case "ArrowDown":
      case "ArrowRight":
      case "ArrowLeft":
      case "Home":
      case "End":
      case "PageUp":
      case "PageDown":
        onChangeCommitted?.(event.target.valueAsNumber);
        break;
      default:
        return;
    }
  };
  const onKeyDown = (e) => {
    switch (e.key) {
      case "ArrowUp":
      case "ArrowDown":
      case "ArrowRight":
      case "ArrowLeft":
      case "Home":
      case "End":
      case "PageUp":
      case "PageDown":
        onChange?.(e.target.valueAsNumber);
        break;
      default:
        return;
    }
  };
  useEffect(() => {
    setFillPercentage(100 * (value - min) / (max - min));
  }, [value]);
  return /* @__PURE__ */ React.createElement(
    "input",
    {
      ...ariaProps,
      "aria-label": ariaLabel,
      tabIndex,
      type: "range",
      className: classNames(styles.slider, styles.wrapperSlider, styles[trackSize], className, {
        [styles.slider_fixed_thumb]: isFixedThumb
      }),
      "data-hook": dataHook,
      onChange: (e) => onChange(e.target.valueAsNumber),
      value,
      min,
      max,
      step,
      onMouseUp: (e) => onChangeCommitted?.(e.target.valueAsNumber),
      onTouchEnd: (e) => onChangeCommitted?.(e.target.valueAsNumber),
      onKeyUp,
      onKeyDown,
      style: bgStyle,
      disabled
    }
  );
};
export {
  Slider
};
//# sourceMappingURL=slider.js.map
