"use strict";
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Range = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_slider_1 = __importDefault(require("react-slider"));
const box_1 = require("../box");
const core_1 = require("../core");
const tooltip_1 = require("../tooltip");
const utils_1 = require("../utils");
const consts_1 = require("./consts");
const range_types_1 = require("./range.types");
const SliderBase = (0, core_1.styled)(react_slider_1.default) `
  width: 100%;
  height: 4px;
  cursor: pointer;
  transition-duration: '0s';
`;
const defaultFormatter = (value) => `${value}`;
/** Implements a range input. */
exports.Range = (0, core_1.vui)((props, ref) => {
    const { className, value, defaultValue = 0, disabled, min = 0, minDistance = 0, max = 100, step = 1, showTooltip = false, showValue = false, formatter = defaultFormatter, onChange } = props, rest = __rest(props, ["className", "value", "defaultValue", "disabled", "min", "minDistance", "max", "step", "showTooltip", "showValue", "formatter", "onChange"]);
    const styles = (0, core_1.useStyleConfig)('Range', props);
    const aliasedProps = (0, utils_1.filterUndefined)({
        'aria-disabled': disabled,
    });
    const isSingleValue = typeof defaultValue !== 'object' && typeof value !== 'object';
    const mainColor = disabled ? consts_1.rangeColors.disabled : consts_1.rangeColors.main;
    const getTrackColor = (trackProps) => {
        const { key } = trackProps;
        if (isSingleValue)
            return key === range_types_1.RangeTrackKey.First ? mainColor : consts_1.rangeColors.track;
        return key === range_types_1.RangeTrackKey.Third
            ? consts_1.rangeColors.track
            : key === range_types_1.RangeTrackKey.Second
                ? mainColor
                : consts_1.rangeColors.track;
    };
    const Thumb = (props, state) => {
        const content = ((0, jsx_runtime_1.jsx)(box_1.Box, Object.assign({ className: "vui-range-thumb" }, styles.thumb, { borderColor: mainColor }, props, { children: showValue && ((0, jsx_runtime_1.jsx)(box_1.Box, Object.assign({ center: true, className: "vui-range-thumb-value" }, styles.thumbValue, { children: formatter(state.valueNow) }))) })));
        return showValue ? (content) : ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { disabled: disabled, text: formatter(state.valueNow), visible: showTooltip, children: content }));
    };
    const Track = (props, state) => (0, jsx_runtime_1.jsx)(box_1.Box, Object.assign({}, styles.track, { bg: getTrackColor(props), className: "vui-range-track" }, props, { index: state.index }));
    return ((0, jsx_runtime_1.jsx)(box_1.Box, Object.assign({ className: (0, utils_1.cs)('vui-range', isSingleValue ? 'vui-range-single' : 'vui-range-range', className), ref: ref }, styles.container, aliasedProps, rest, { children: (0, jsx_runtime_1.jsx)(SliderBase, { className: "vui-range-slider", defaultValue: defaultValue, disabled: disabled, max: max, min: min, minDistance: minDistance, onChange: onChange, renderThumb: Thumb, renderTrack: Track, step: step, value: value }) })));
});
exports.Range.displayName = 'Range';
exports.default = exports.Range;
//# sourceMappingURL=range.js.map