import { __assign } from "tslib";
import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Separator, Pressable } from '@fluentui/react-native';
var thumbSize = 20;
var defaultMaximumValue = 100;
var defaultMinimumValue = 1;
var styles = StyleSheet.create({
    root: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    slider: {
        minWidth: thumbSize * 2,
        flexDirection: 'row',
        alignItems: 'center',
        alignContent: 'stretch',
        height: thumbSize,
        width: 200,
    },
    track: {
        flexGrow: 1,
    },
    thumb: {
        width: thumbSize,
        height: thumbSize,
        borderRadius: thumbSize,
        borderWidth: 2,
        borderColor: '#7A7574',
        backgroundColor: '#FFFFFF',
        position: 'absolute',
    },
    label: {
        margin: 8,
        fontSize: 12,
    },
});
var Track = Separator.customize({ separatorWidth: 4 });
function onThumbRenderStyle(state, thumbLocation) {
    return __assign(__assign({}, styles.thumb), { borderColor: state.pressed ? 'black' : state.hovered ? 'red' : '#7A7574', marginLeft: thumbLocation });
}
function calculateThumbLocationAndValue(startTouchThumbLocation, startTouchPosition, currentTouchPosition, trackLength, minimum, maximum) {
    var newThumbLocation = startTouchThumbLocation + currentTouchPosition - startTouchPosition;
    newThumbLocation = Math.max(0, newThumbLocation);
    newThumbLocation = Math.min(newThumbLocation, trackLength);
    var newValue = minimum + (newThumbLocation / trackLength) * (maximum - minimum);
    var intValue = Math.min(maximum, Math.floor(newValue + 0.3)); // snap to nearest integer value
    newThumbLocation = (trackLength * (intValue - minimum)) / (maximum - minimum);
    return [newThumbLocation, intValue];
}
function verifyProps(initialValue, minimum, maximum) {
    if (minimum >= maximum) {
        throw new Error("'minimum' must not be greater than or equal 'maximum'.");
    }
    if (initialValue < minimum) {
        throw new Error("'initialValue' must not be less than 'minimum'.");
    }
    if (initialValue > maximum) {
        throw new Error("'initialValue' must not be greater than 'maximum'.");
    }
}
export var Slider = function (props) {
    var minimum = props.minimum, maximum = props.maximum, initialValue = props.initialValue;
    minimum = minimum || defaultMinimumValue;
    maximum = maximum || defaultMaximumValue;
    initialValue = initialValue || minimum;
    verifyProps(initialValue, minimum, maximum);
    var userStyle = props.style, onChange = props.onChange;
    var _a = React.useState(0), thumbLocation = _a[0], setThumbLocation = _a[1];
    var startTouchPosition = React.useRef(-1);
    var startTouchThumbLocation = React.useRef(-1);
    var trackLength = React.useRef(-1);
    var sliderValue = React.useRef(initialValue);
    var ref = React.useRef(null);
    React.useEffect(function () {
        if (ref.current) {
            ref.current.measure(function (_x, _y, width) {
                if (width <= 0) {
                    return;
                }
                // track length is the entire view width subtracted by the thumb size.
                trackLength.current = Math.max(0, width - thumbSize);
                var initialThumbLocation = (trackLength.current * (initialValue - minimum)) / (maximum - minimum);
                setThumbLocation(initialThumbLocation);
            });
        }
    }, [ref, initialValue, maximum, minimum]);
    return (React.createElement(View, { style: [userStyle, styles.root] },
        React.createElement(View, __assign({ ref: ref }, props, { style: styles.slider }),
            React.createElement(Track, { style: styles.track }),
            trackLength.current > 0 && (React.createElement(Pressable, { renderStyle: function (state) { return onThumbRenderStyle(state, thumbLocation); }, onStartShouldSetResponder: function () { return trackLength.current > 0; }, onResponderStart: function (e) {
                    startTouchPosition.current = e.nativeEvent.pageX;
                    startTouchThumbLocation.current = thumbLocation;
                }, onResponderMove: function (e) {
                    if (startTouchPosition.current !== -1 && trackLength.current > 0) {
                        var _a = calculateThumbLocationAndValue(startTouchThumbLocation.current, startTouchPosition.current, e.nativeEvent.pageX, trackLength.current, minimum || defaultMinimumValue, maximum || defaultMaximumValue), newThumbLocation = _a[0], newValue = _a[1];
                        sliderValue.current = newValue;
                        setThumbLocation(newThumbLocation);
                    }
                }, onResponderEnd: function () {
                    startTouchPosition.current = -1;
                    startTouchThumbLocation.current = -1;
                }, onResponderRelease: function () {
                    if (onChange) {
                        onChange(sliderValue.current);
                    }
                } }))),
        React.createElement(Text, { style: styles.label }, sliderValue.current)));
};
//# sourceMappingURL=Slider.js.map