/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.108.1
 * Released under the MIT license.
 */

import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback } from 'react';
import { NumberInput } from '../../..//index.js';
function calculateWidth(max, hasSuffix) {
    if (typeof max === 'undefined') {
        return undefined;
    }
    const value = String(max).length;
    // for 2 digit values 1.6 is better with suffix
    const suffixWidth = value > 2 ? 1.6 : 1.75;
    const charWidth = hasSuffix ? suffixWidth : 2;
    return `${value * charWidth}x`;
}
export function SliderInput(props) {
    const { state, index, formatOptions, width, min, max, ...otherProps } = props;
    const inputWidth = width || calculateWidth(max);
    const value = state.values[index];
    const onChange = useCallback((value) => {
        state.setThumbValue(index, value);
    }, [index, state]);
    const maxLength = typeof max !== 'undefined' ? String(max).length : undefined;
    return (_jsx(NumberInput, { insideForm: false, labelPosition: "top", ...otherProps, hideStepper: true, size: "small", wrapperStyles: {
            width: inputWidth,
        }, textAlign: "center", formatOptions: formatOptions, value: value, minValue: state.getThumbMinValue(index), maxValue: state.getThumbMaxValue(index), maxLength: maxLength, onChange: onChange }));
}

        