/**
 * @file EditableMultiNumberSlider.js
 * @author Radim Buráň (xburan03@stud.fit.vutbr.cz)
 */

import {Slider} from "@mui/material";
import React, {useEffect, useState} from "react";


function EditableMultiNumberSlider(props) {
    const [values, setValues] = useState([0]);
    const [marks, setMarks] = useState([]);


    useEffect(() => {
        setValues(props.values);
    }, [props]);

    useEffect(() => {
        let newMarks = values.filter((item, pos) => values.indexOf(item) === pos)
            .map(val => {
            return ({
                value: val,
                label: val
            })
        })
        setMarks(newMarks);
    }, [values]);

    const valueChanged = (e) => {
        if (props.disabled) {
            return;
        }
        const vals = e.target.value;

        setValues(vals);

        props?.changeFce(vals);
    };

    return (<Slider
                size="small"
                value={values}
                valueLabelDisplay="off"
                min={props.min}
                max={props.max}
                onChange={(e) => valueChanged(e)}
                marks={marks}
            />
    );
}

export default EditableMultiNumberSlider;