import { jsx as _jsx } from "react/jsx-runtime";
import ReactSlider from 'react-slider';
import { Box } from '../box';
import { styled, useStyleConfig, vui } from '../core';
import { Tooltip } from '../tooltip';
import { cs, filterUndefined } from '../utils';
import { rangeColors } from './consts';
import { RangeTrackKey } from './range.types';
const SliderBase = styled(ReactSlider) `
  width: 100%;
  height: 4px;
  cursor: pointer;
  transition-duration: '0s';
`;
const defaultFormatter = (value) => `${value}`;
/** Implements a range input. */
export const Range = vui((props, ref) => {
    const { className, value, defaultValue = 0, disabled, min = 0, minDistance = 0, max = 100, step = 1, showTooltip = false, showValue = false, formatter = defaultFormatter, onChange, ...rest } = props;
    const styles = useStyleConfig('Range', props);
    const aliasedProps = filterUndefined({
        'aria-disabled': disabled,
    });
    const isSingleValue = typeof defaultValue !== 'object' && typeof value !== 'object';
    const mainColor = disabled ? rangeColors.disabled : rangeColors.main;
    const getTrackColor = (trackProps) => {
        const { key } = trackProps;
        if (isSingleValue)
            return key === RangeTrackKey.First ? mainColor : rangeColors.track;
        return key === RangeTrackKey.Third
            ? rangeColors.track
            : key === RangeTrackKey.Second
                ? mainColor
                : rangeColors.track;
    };
    const Thumb = (props, state) => {
        const content = (_jsx(Box, { className: "vui-range-thumb", ...styles.thumb, borderColor: mainColor, ...props, children: showValue && (_jsx(Box, { center: true, className: "vui-range-thumb-value", ...styles.thumbValue, children: formatter(state.valueNow) })) }));
        return showValue ? (content) : (_jsx(Tooltip, { disabled: disabled, text: formatter(state.valueNow), visible: showTooltip, children: content }));
    };
    const Track = (props, state) => _jsx(Box, { ...styles.track, bg: getTrackColor(props), className: "vui-range-track", ...props, index: state.index });
    return (_jsx(Box, { className: cs('vui-range', isSingleValue ? 'vui-range-single' : 'vui-range-range', className), ref: ref, ...styles.container, ...aliasedProps, ...rest, children: _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 }) }));
});
Range.displayName = 'Range';
export default Range;
//# sourceMappingURL=range.js.map