import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import TextBase from "../text";
import { Box } from "../grid";
import { currentTheme } from "../../theme";
import { colorFromGradient } from "../../util";
import { Wrapper, BarWrapper, SubWrapper } from "./styled";
import { DefaultThumb } from "./thumb";
const sliderThumbTheme = currentTheme.sliderThumb;
const percentToValue = (prc, min, max) => {
    return min + prc * (max - min);
};
const valueToPercent = (val, min, max) => {
    return (val - min) / (max - min);
};
const Slider = ({ normalizeValue = percentToValue, denormalizeValue = valueToPercent, ...props }) => {
    const [isDragging, setIsDragging] = React.useState(false);
    const startDragging = () => setIsDragging(true);
    const endDragging = () => setIsDragging(false);
    const [currentX, setCurrentX] = React.useState(0);
    const [thumbColor, setThumbColor] = React.useState();
    const barRef = React.useRef(null);
    React.useEffect(() => {
        if (props.pickedColors) {
            setThumbColor(colorFromGradient(0, props.pickedColors));
        }
    }, [props.pickedColors]);
    React.useEffect(() => {
        const clientRect = barRef.current?.getBoundingClientRect();
        if (clientRect) {
            const percent = denormalizeValue(props.value, props.minValue, props.maxValue);
            const currentColor = props.pickedColors
                ? colorFromGradient(percent, props.pickedColors)
                : undefined;
            setCurrentX(percent * clientRect.width);
            setThumbColor(currentColor);
            props.onChange(props.value);
        }
    }, [props.minValue, props.maxValue, props.pickedColors]);
    const move = React.useCallback((target, pageX) => {
        const clientRect = target.getBoundingClientRect();
        const moveX = pageX - clientRect.left;
        const percent = moveX / parseFloat(clientRect.width.toString());
        const value = normalizeValue(percent, props.minValue, props.maxValue);
        if (props.minValue <= value && value <= props.maxValue) {
            setCurrentX(moveX);
            const currentColor = props.pickedColors
                ? colorFromGradient(percent, props.pickedColors)
                : undefined;
            setThumbColor(currentColor);
            props.onChange(value);
        }
    }, [
        props.onChange,
        props.minValue,
        props.maxValue,
        props.width,
        props.pickedColors,
    ]);
    const onMouseMove = React.useCallback((e) => {
        if (isDragging) {
            move(e.currentTarget, e.pageX);
        }
    }, [isDragging, move]);
    const onMouseMoveWindow = React.useCallback((evt) => {
        if (barRef.current) {
            // @ts-ignore
            move(barRef.current, evt.pageX);
        }
    }, [move, barRef.current]);
    const onClick = React.useCallback((e) => {
        if (!isDragging && barRef.current) {
            move(e.currentTarget, e.pageX);
        }
    }, [isDragging, move]);
    React.useEffect(() => {
        window.addEventListener("mouseup", endDragging);
        return () => {
            window.removeEventListener("mouseup", endDragging);
        };
    }, []);
    React.useEffect(() => {
        if (isDragging) {
            window.addEventListener("mousemove", onMouseMoveWindow);
            return () => {
                window.removeEventListener("mousemove", onMouseMoveWindow);
            };
        }
    }, [isDragging]);
    const thumbStyle = React.useMemo(() => {
        const translateX = `${(-sliderThumbTheme.width / 2 + currentX).toFixed(2)}px`;
        const translateY = `-${(sliderThumbTheme.height / 2).toFixed(2)}px`;
        return {
            transform: `translate(${translateX}, ${translateY})`,
        };
    }, [currentX]);
    return (_jsxs(Wrapper, { width: props.width, className: "ui-slider", children: [_jsx(BarWrapper, { className: "ui-slider__bar", onClick: onClick, onMouseMove: onMouseMove, ref: barRef, children: _jsxs("div", { className: "ui-slider__thumb", onMouseDown: startDragging, style: thumbStyle, children: [React.createElement(props.thumb ?? DefaultThumb, {
                            className: "ui-slider__thumb-img",
                            fill: thumbColor,
                        }), _jsx(TextBase.F2, { className: "ui-slider__thumb-text", children: props.formatValue(props.value) })] }) }), _jsx(Box, { mt: "4px", children: _jsx(SubWrapper, { className: "ui-slider__subscript", children: props.subscripts.map((s, i) => (_jsx(TextBase.F3, { className: `ui-slider__subscript-text ${`ui-slider__subscript-text--${i}`}`, children: s }))) }) })] }));
};
export default Slider;
//# sourceMappingURL=index.js.map