import { jsx as _jsx } from "react/jsx-runtime";
import Slider from "@material-ui/core/Slider";
import { makeStyles } from "@material-ui/core/styles";
import { currentTheme } from "../../theme";
// import Thumb from "./thumb";
const useStyles = makeStyles({
    root: {
        width: 286,
        color: currentTheme.colors.primary,
        fontFamily: "Medium",
        fontSize: "12px",
    },
    rail: {
        color: currentTheme.colors.border,
    },
    mark: {
        color: "transparent",
    },
    markLabel: {
        color: currentTheme.colors.gray,
        fontFamily: "Medium",
        fontSize: "12px",
        top: "-10px",
    },
    markLabelActive: {
        color: currentTheme.colors.gray,
        fontFamily: "Medium",
        fontSize: "12px",
        top: "-10px",
    },
    valueLabel: {
        fontFamily: "Medium",
        fontSize: "8px",
        color: currentTheme.colors.primary,
        backgroundColor: "transparent",
    },
});
const useMarks = (min, max, formatValue) => [
    {
        value: min,
        label: formatValue(min),
    },
    {
        value: max,
        label: formatValue(max),
    },
];
/**
 * defaultValue, min, max, value should be only integer numbers
 * to avoid ambiguity in chosen value
 */
const MaterialSlider = (props) => {
    const classes = useStyles();
    const marks = useMarks(props.min, props.max, props.formatValue);
    return (_jsx(Slider, { className: props.className, classes: classes, defaultValue: props.defaultValue, onChange: props.onChange, step: props.step, getAriaValueText: props.formatValue, valueLabelFormat: props.formatValue, valueLabelDisplay: "auto", min: props.min, max: props.max, value: props.value, disabled: props.disabled, ThumbComponent: props.thumb, ...(props.marks ? { marks: props.marks } : marks) }));
};
export default MaterialSlider;
//# sourceMappingURL=index.js.map