import {
  numberFormatter
} from "./chunk-4SIR6D4L.js";
import {
  Label
} from "./chunk-ZN7OWLZY.js";
import {
  useLabel
} from "./chunk-YLEFK7S2.js";

// src/components/Slider/Slider.tsx
import classNames from "classnames/dedupe";
import { useRef, useState } from "react";
import "@simplybusiness/mobius/src/components/Slider/Slider.css";
import { jsx, jsxs } from "react/jsx-runtime";
var Slider = (props) => {
  const {
    id,
    className,
    label,
    "aria-label": ariaLabel,
    "aria-labelledby": ariaLabelledBy,
    minValue,
    maxValue,
    step = 1,
    defaultValue = 0,
    value,
    onChange,
    onChangeEnd,
    variant = "primary",
    minLabel,
    maxLabel,
    formatOptions,
    isDisabled = false
  } = props;
  const trackRef = useRef(null);
  const [currentValue, setCurrentValue] = useState(
    value || defaultValue || 0
  );
  const [isDragging, setIsDraggging] = useState(false);
  const { labelProps, fieldProps } = useLabel({
    id,
    label,
    "aria-label": ariaLabel,
    "aria-labelledby": ariaLabelledBy
  });
  const formattedValue = numberFormatter(currentValue, formatOptions);
  const classes = classNames("mobius", "mobius-slider", className, {
    "--is-disabled": isDisabled,
    "--is-primary": variant === "primary",
    "--is-secondary": variant === "secondary",
    "--is-dragging": isDragging
  });
  const handleChange = (e) => {
    const val = +e.target.value;
    setCurrentValue(val);
    if (onChange) {
      onChange(val);
    }
  };
  const handleChangeStart = () => {
    setIsDraggging(true);
  };
  const handleChangeEnd = () => {
    setIsDraggging(false);
    if (onChangeEnd) {
      onChangeEnd(currentValue);
    }
  };
  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
    /* @__PURE__ */ jsxs("div", { className: "mobius-slider__label-wrapper", children: [
      label && /* @__PURE__ */ jsx(Label, { ...labelProps, children: label }),
      label && /* @__PURE__ */ jsx("output", { style: { flex: "1 0 auto", textAlign: "end" }, children: formattedValue })
    ] }),
    /* @__PURE__ */ jsx("div", { ref: trackRef, className: "mobius-slider__track-wrapper", children: /* @__PURE__ */ jsx(
      "input",
      {
        className: "mobius-slider__track",
        type: "range",
        min: minValue,
        max: maxValue,
        value: currentValue,
        step,
        onChange: handleChange,
        autoComplete: "off",
        disabled: isDisabled,
        onMouseDown: handleChangeStart,
        onMouseUp: handleChangeEnd,
        onKeyDown: handleChangeStart,
        onKeyUp: handleChangeEnd,
        ...fieldProps
      }
    ) }),
    /* @__PURE__ */ jsxs("div", { className: "mobius-slider__labels", children: [
      /* @__PURE__ */ jsx("div", { className: "mobius-slider__min-label", "data-testid": "min-label", children: minLabel }),
      /* @__PURE__ */ jsx("div", { className: "mobius-slider__max-label", "data-testid": "max-label", children: maxLabel })
    ] })
  ] });
};

export {
  Slider
};
//# sourceMappingURL=chunk-NGNVAFBJ.js.map
