var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React from 'react';
import { StyledContainer, StyledSlider, StyledIncrementOverlay, StyledIncrementContainer, StyledLabel, } from './Slider.styles';
export var getIncrements = function (_a) {
    var min = _a.min, max = _a.max, step = _a.step;
    if (!step) {
        return 0;
    }
    return (max - min) / step;
};
export var getPercentage = function (_a) {
    var max = _a.max, min = _a.min, value = _a.value;
    return ((value - min) / (max - min)) * 100;
};
export var getLabel = function (_a) {
    var max = _a.max, min = _a.min, step = _a.step, index = _a.index;
    if (min === 0) {
        return index * step;
    }
    else if (min >= 0) {
        return index * step + min;
    }
    else if (min <= 0) {
        return (index - getIncrements({ max: max, min: min, step: step })) * step + max;
    }
    else {
        return 0;
    }
};
export var getDefaultValue = function (_a) {
    var min = _a.min, max = _a.max, step = _a.step;
    // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value
    var defaultVal = max < min ? min : min + (max - min) / 2;
    return step ? Math.round(defaultVal / step) * step : defaultVal;
};
/**

 A slider is a bar with selectable/grabbable handle. It allows users to click
 and drag horizontally to a desired value. It is used when users need to select
 a value from a predefined range of values. Sliders should always have a
 corresponding value or increment displayed within proximity of the component.

 @since 10.19.0

 @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-slider--demo)

 @see [Design Guidelines](https://design.procore.com/slider)

 */
export var Slider = React.forwardRef(function Slider(_a, ref) {
    var className = _a.className, disabled = _a.disabled, onChange = _a.onChange, _b = _a.max, max = _b === void 0 ? 100 : _b, _c = _a.min, min = _c === void 0 ? 0 : _c, showLabel = _a.showLabel, step = _a.step, style = _a.style, value_ = _a.value, props = __rest(_a, ["className", "disabled", "onChange", "max", "min", "showLabel", "step", "style", "value"]);
    var _d = React.useState(false), isDragging = _d[0], setIsDragging = _d[1];
    var value = value_ !== null && value_ !== void 0 ? value_ : getDefaultValue({ max: max, min: min, step: step });
    var increments = getIncrements({ max: max, min: min, step: step });
    // check if the "step" value does not cleanly
    //  divide into max - min
    if (increments % 1 !== 0) {
        console.warn('@procore/core-react: SLIDER COMPONENT WARNING: Your step value does not cleanly divide into max - min. This will cause your Slider to display incorrectly.');
    }
    return (React.createElement(StyledContainer, { className: className, style: style, showLabel: showLabel },
        React.createElement(StyledSlider, __assign({}, props, { disabled: disabled, onChange: onChange, max: max, min: min, "$percent": getPercentage({ max: max, min: min, value: value }), ref: ref, step: step, type: "range", value: value, onMouseDown: function () { return setIsDragging(true); }, onMouseUp: function () { return setIsDragging(false); }, isDragging: isDragging })),
        step && (React.createElement(StyledIncrementContainer, null, Array(Math.floor(increments) + 1)
            .fill(null)
            .map(function (_, index) {
            return (React.createElement(StyledIncrementOverlay, { key: "core-slider-increment-overlay-".concat(index, "-").concat(min, "-").concat(max, "-").concat(step) }, showLabel && (React.createElement(StyledLabel, { intent: "small" }, getLabel({
                min: min,
                max: max,
                step: step,
                index: index,
            })))));
        })))));
});
//# sourceMappingURL=Slider.js.map