import { __rest } from '../../_virtual/_tslib.js';
import React__default, { useRef, useState, useEffect } from 'react';
import { Wrapper, Col, TextWrapper, Title, SupportText, SliderWrapper, Input, Track, ThumbWrapper, Thumb, ThumbValue, MinMaxValuesWrapper } from './styles.js';

const roundValue = (num, roundTo) => Math.ceil(num / roundTo) * roundTo;
const getPositionX = (pageX, offsetLeft, offsetWidth) => {
    if (pageX < offsetLeft) {
        return offsetLeft;
    }
    else if (pageX > offsetLeft + offsetWidth) {
        return offsetLeft + offsetWidth;
    }
    else {
        return pageX;
    }
};
function Slider(_a) {
    var { onChange, value, min = 0, max = 100, thumbText, minText, maxText, minMaxTextColor, variant = 'primary', stepValue, title, supportText } = _a, props = __rest(_a, ["onChange", "value", "min", "max", "thumbText", "minText", "maxText", "minMaxTextColor", "variant", "stepValue", "title", "supportText"]);
    const trackRef = useRef(null);
    const [localValue, setLocalValue] = useState(value);
    const calcPos = (value) => {
        return (100 * (value - min)) / (max - min);
    };
    const [position, setPosition] = useState(calcPos(value));
    const setSafeValue = (newVal) => {
        if (stepValue) {
            newVal = roundValue(newVal, stepValue);
        }
        if (newVal < min)
            return min;
        if (newVal > max)
            return max;
        return newVal;
    };
    const updatePosition = (track, pageX) => {
        // Gets the offset relative to the viewport.
        const offsetLeft = track.getBoundingClientRect().left;
        const posX = getPositionX(pageX, offsetLeft, track.offsetWidth);
        const pos = Math.round(((posX - offsetLeft) / track.offsetWidth) * 100);
        setPosition(pos);
        const newValue = Math.round(min + ((max - min) * pos) / 100);
        onChange(setSafeValue(newValue));
    };
    const onTouchSlider = (track) => (event) => {
        if (!event.touches[0])
            return;
        const pageX = event.touches[0].pageX;
        updatePosition(track, pageX);
    };
    const onMouseMoveSlider = (track) => (event) => {
        updatePosition(track, event.pageX);
    };
    useEffect(() => {
        if (value !== localValue) {
            setPosition(calcPos(value));
            setLocalValue(setSafeValue(value));
        }
    }, [value]);
    useEffect(() => {
        const track = trackRef.current;
        if (track) {
            const onSliderMove = onMouseMoveSlider(track);
            const onTouchSliderMove = onTouchSlider(track);
            const onMouseUp = () => {
                document.removeEventListener('mousemove', onSliderMove);
                document.removeEventListener('mouseup', onMouseUp);
            };
            const onMouseDown = (e) => {
                e.preventDefault();
                document.addEventListener('mousemove', onSliderMove);
                document.addEventListener('mouseup', onMouseUp);
                onMouseMoveSlider(track)(e);
            };
            const onTouchDown = (e) => {
                e.preventDefault();
                onTouchSlider(track)(e);
            };
            track.addEventListener('mousedown', onMouseDown);
            track.addEventListener('touchmove', onTouchSliderMove);
            track.addEventListener('touchstart', onTouchDown);
            track.addEventListener('touchend', onMouseUp);
            return () => {
                track.removeEventListener('mousedown', onMouseDown);
                track.removeEventListener('touchmove', onTouchSliderMove);
                track.removeEventListener('touchstart', onTouchDown);
                track.removeEventListener('touchend', onMouseUp);
            };
        }
    }, []);
    return (React__default.createElement(Wrapper, Object.assign({}, props),
        React__default.createElement(Col, null,
            React__default.createElement(TextWrapper, null,
                React__default.createElement(Title, null, title),
                React__default.createElement(SupportText, null, supportText)),
            React__default.createElement(SliderWrapper, { ref: trackRef, isThumbText: Boolean(thumbText) },
                React__default.createElement(Input, { type: "hidden", value: value, "data-testid": "slider-input" }),
                React__default.createElement(Track, { position: position, trackColor: variant }),
                React__default.createElement(ThumbWrapper, { position: position },
                    React__default.createElement(Thumb, null),
                    React__default.createElement(ThumbValue, null, thumbText)))),
        React__default.createElement(MinMaxValuesWrapper, { onlyMax: Boolean(maxText) },
            React__default.createElement("span", null, minText),
            React__default.createElement("span", null, maxText))));
}

export { Slider };
