import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useRef, useCallback, useEffect } from "react";
import styles from "./RangeComponent.module.scss";
import clsx from "clsx";
const RangeComponent = ({ minValue = 2, maxValue = 6, getRange, disabled = false, }) => {
    const keyMap = {
        1: 1,
        10: 2,
        25: 3,
        50: 4,
        200: 5,
        500: 6,
        1000: 7,
        5000: 8,
        10000: 9,
        50000000: 10,
    };
    const numberMap = {
        1: 1,
        2: 10,
        3: 25,
        4: 50,
        5: 200,
        6: 500,
        7: 1000,
        8: 5000,
        9: 10000,
        10: 50000000,
    };
    // const [minSliderValue, setMinSliderValue] = useState<number>(keyMap[minValue] || 3);
    // const [maxSliderValue, setMaxSliderValue] = useState<number>(keyMap[maxValue] || 8);
    // Use prop values directly instead of state
    const minSliderValue = keyMap[minValue] || 3;
    const maxSliderValue = keyMap[maxValue] || 8;
    const [isDragging, setIsDragging] = useState(null);
    // Removed showTooltips state - now handled by CSS opacity
    const sliderRef = useRef(null);
    const compositeClassNames = clsx({
        [styles["discrete-Slider--Generic"]]: true,
        [styles["discrete-Slider--Disabled"]]: disabled,
    });
    const formatLabel = (value) => {
        if (disabled) {
            return "";
        }
        else if (value < 7) {
            return `${numberMap[value]}`;
        }
        else if (value === 7) {
            return `1K`;
        }
        else if (value === 8) {
            return `5K`;
        }
        else if (value === 9) {
            return `10K`;
        }
        else {
            return `10K+`;
        }
    };
    const getPercentage = (value) => {
        return ((value - 1) / (10 - 1)) * 100;
    };
    const getValueFromPercentage = (percentage) => {
        return Math.round(1 + (percentage / 100) * (10 - 1));
    };
    const handleTrackClick = useCallback((e) => {
        if (disabled || isDragging)
            return;
        const rect = sliderRef.current?.getBoundingClientRect();
        if (!rect)
            return;
        const percentage = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
        const clickValue = getValueFromPercentage(percentage);
        // Determine which thumb is closer to the click position
        const distanceToMin = Math.abs(clickValue - minSliderValue);
        const distanceToMax = Math.abs(clickValue - maxSliderValue);
        if (distanceToMin <= distanceToMax) {
            // Move min thumb, but ensure it doesn't go beyond max - 1
            const newMinValue = Math.min(clickValue, maxSliderValue - 1);
            const minRangeMap = numberMap[newMinValue];
            const maxRangeMap = numberMap[maxSliderValue];
            getRange({ minRange: minRangeMap, maxRange: maxRangeMap });
        }
        else {
            // Move max thumb, but ensure it doesn't go below min + 1
            const newMaxValue = Math.max(clickValue, minSliderValue + 1);
            const minRangeMap = numberMap[minSliderValue];
            const maxRangeMap = numberMap[newMaxValue];
            getRange({ minRange: minRangeMap, maxRange: maxRangeMap });
        }
    }, [disabled, isDragging, minSliderValue, maxSliderValue, numberMap, getRange]);
    const handleMouseDown = useCallback((type) => (e) => {
        if (disabled)
            return;
        e.preventDefault();
        e.stopPropagation();
        setIsDragging(type);
        // Removed setShowTooltips - now handled by CSS
    }, [disabled]);
    const handleMouseMove = useCallback((e) => {
        if (!isDragging || !sliderRef.current || disabled)
            return;
        const rect = sliderRef.current.getBoundingClientRect();
        const percentage = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
        const value = getValueFromPercentage(percentage);
        if (isDragging === 'min') {
            const newMinValue = Math.min(value, maxSliderValue - 1);
            // setMinSliderValue(newMinValue); // Removed - now controlled by props
            const minRangeMap = numberMap[newMinValue];
            const maxRangeMap = numberMap[maxSliderValue];
            getRange({ minRange: minRangeMap, maxRange: maxRangeMap });
        }
        else if (isDragging === 'max') {
            const newMaxValue = Math.max(value, minSliderValue + 1);
            // setMaxSliderValue(newMaxValue); // Removed - now controlled by props
            const minRangeMap = numberMap[minSliderValue];
            const maxRangeMap = numberMap[newMaxValue];
            getRange({ minRange: minRangeMap, maxRange: maxRangeMap });
        }
    }, [isDragging, maxSliderValue, minSliderValue, disabled, numberMap, getRange]);
    const handleMouseUp = useCallback(() => {
        setIsDragging(null);
        // Removed setShowTooltips - now handled by CSS
    }, []);
    useEffect(() => {
        if (isDragging) {
            document.addEventListener('mousemove', handleMouseMove);
            document.addEventListener('mouseup', handleMouseUp);
            return () => {
                document.removeEventListener('mousemove', handleMouseMove);
                document.removeEventListener('mouseup', handleMouseUp);
            };
        }
    }, [isDragging, handleMouseMove, handleMouseUp]);
    // Removed tooltip show/hide handlers - now handled by CSS hover states
    // const handleSliderMouseEnter = () => { ... }
    // const handleSliderMouseLeave = () => { ... }
    // const handleThumbMouseEnter = () => { ... }
    // const handleThumbMouseLeave = () => { ... }
    const minPercentage = getPercentage(minSliderValue);
    const maxPercentage = getPercentage(maxSliderValue);
    return (_jsxs("span", { className: compositeClassNames, children: ["1", _jsxs("div", { className: styles["range-slider-container"], ref: sliderRef, onClick: handleTrackClick, children: [_jsx("div", { className: styles["range-slider-track"], children: _jsx("div", { className: styles["range-slider-track-active"], style: {
                                left: `${minPercentage}%`,
                                width: `${maxPercentage - minPercentage}%`,
                            } }) }), _jsx("div", { className: `${styles["range-slider-thumb"]} ${styles["range-slider-thumb--min"]}`, style: { left: `${minPercentage}%` }, onMouseDown: handleMouseDown('min'), children: _jsx("div", { className: styles["range-slider-tooltip"], children: formatLabel(minSliderValue) }) }), _jsx("div", { className: `${styles["range-slider-thumb"]} ${styles["range-slider-thumb--max"]}`, style: { left: `${maxPercentage}%` }, onMouseDown: handleMouseDown('max'), children: _jsx("div", { className: styles["range-slider-tooltip"], children: formatLabel(maxSliderValue) }) })] }), "10K+"] }));
};
export default RangeComponent;
