import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useMemo, useRef, useState } from "react";
import { BalancedProgressBar } from "../ProgressBar";
import { SLIDER_TEST_IDS } from "./Slider.e2e";
import throttle from "lodash/throttle";
import St from "./Slider.module.scss";
/**
 * A slider component that lets users select a value by dragging a handle.
 * It converts the mouse position into a value between the specified minimum and maximum.
 */
export default function Slider(p) {
    const { value: externalValue, onChange } = p;
    const [controlledValue, setCurrValue] = useState(externalValue || p.min);
    const indicator = useRef(null);
    const body = useRef(null);
    const throttleOnChange = useMemo(() => throttle(onChange, 1000 / 24), []);
    useEffect(() => {
        throttleOnChange(controlledValue);
    }, [controlledValue]);
    useEffect(() => {
        setTimeout(() => {
            const position = body.current.getBoundingClientRect();
            function updateValue(e) {
                const isAt = e.pageX;
                const isAtRelativeToBodyWidth = isAt - position.x;
                const isAtPercent = (isAtRelativeToBodyWidth * 100) / position.width;
                const mathToFixed = Number(isAtPercent.toFixed(0));
                const normalized = p.min + (p.max - p.min) * (mathToFixed / 100);
                const stepNormalization = (() => {
                    if (!p.step)
                        return normalized;
                    else {
                        const modulus = normalized % p.step;
                        const toOne = modulus / p.step;
                        const rounded = Math.round(toOne);
                        const incOrNot = rounded * p.step;
                        const finalNormalization = normalized - modulus + incOrNot;
                        return finalNormalization;
                    }
                })();
                setCurrValue(stepNormalization < p.min
                    ? p.min
                    : stepNormalization > p.max
                        ? p.max
                        : stepNormalization);
            }
            indicator.current.setAttribute("data-testid", SLIDER_TEST_IDS.INDICATOR);
            indicator.current.classList.add(St.indicator);
            indicator.current.onmousedown = (e) => {
                updateValue(e);
                window.addEventListener("mousemove", updateValue);
                window.onmouseup = () => {
                    window.removeEventListener("mousemove", updateValue);
                };
            };
        }, 500);
    }, []);
    return (_jsx(BalancedProgressBar, { current: externalValue || controlledValue, mode: "guide", ...p, indicatorRef: indicator, bodyRef: body }));
}
//# sourceMappingURL=Slider.js.map