'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _tslib = require('../../_virtual/_tslib.js');
var React = require('react');
var styles = require('./styles.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

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 = _tslib.__rest(_a, ["onChange", "value", "min", "max", "thumbText", "minText", "maxText", "minMaxTextColor", "variant", "stepValue", "title", "supportText"]);
    const trackRef = React.useRef(null);
    const [localValue, setLocalValue] = React.useState(value);
    const calcPos = (value) => {
        return (100 * (value - min)) / (max - min);
    };
    const [position, setPosition] = React.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);
    };
    React.useEffect(() => {
        if (value !== localValue) {
            setPosition(calcPos(value));
            setLocalValue(setSafeValue(value));
        }
    }, [value]);
    React.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['default'].createElement(styles.Wrapper, Object.assign({}, props),
        React__default['default'].createElement(styles.Col, null,
            React__default['default'].createElement(styles.TextWrapper, null,
                React__default['default'].createElement(styles.Title, null, title),
                React__default['default'].createElement(styles.SupportText, null, supportText)),
            React__default['default'].createElement(styles.SliderWrapper, { ref: trackRef, isThumbText: Boolean(thumbText) },
                React__default['default'].createElement(styles.Input, { type: "hidden", value: value, "data-testid": "slider-input" }),
                React__default['default'].createElement(styles.Track, { position: position, trackColor: variant }),
                React__default['default'].createElement(styles.ThumbWrapper, { position: position },
                    React__default['default'].createElement(styles.Thumb, null),
                    React__default['default'].createElement(styles.ThumbValue, null, thumbText)))),
        React__default['default'].createElement(styles.MinMaxValuesWrapper, { onlyMax: Boolean(maxText) },
            React__default['default'].createElement("span", null, minText),
            React__default['default'].createElement("span", null, maxText))));
}

exports.Slider = Slider;
