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

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


function EditableNumberSlider(props) {
    const [value, setValue] = useState(0);
    // const [mark, setMark] = useState({});


    useEffect(() => {
        setValue(props.value);
    }, [props]);

    const valueChanged = (e) => {
        if (props.disabled) {
            return;
        }
        const value = Number(e.target.value);
        setValue(value);
        props?.changeFce(value);
    };

    return (<Box sx={{display: "inline-flex", flexWrap: "nowrap", width: "100%"}}>
        <Slider
            value={value}
            size="small"
            valueLabelDisplay="auto"
            min={props.min}
            max={props.max}
            onChange={(e) => valueChanged(e)}
            sx={{flexGrow: 1}}
        />

        <Input
            value={value}
            size="small"
            onChange={(e) => valueChanged(e)}
            inputProps={{
                step: 1,
                min: props.min,
                max: props.max,
                type: 'number'
            }}
            sx={{marginLeft: "15px", width: "6.25ch"}}
        />
    </Box>);
}

export default EditableNumberSlider;