import React, { useState } from 'react';
import { Slider as MuiSlider, SliderProps as MuiSliderProps, Typography } from '@mui/material';
import './slider.scss';
import InputAdornment from '@mui/material/InputAdornment';
import OutlinedInput from '@mui/material/OutlinedInput';

export interface SliderProps extends MuiSliderProps {
    label?: string;
    helperText?: string;
}

const MIN = 0 ;
const MAX = 100;
const STEP = 1;
export const Slider = ({ helperText, label, size, defaultValue = MIN, valueLabelDisplay, color, orientation,
   min = MIN, max = MAX, step = STEP, marks, disabled, ...rest }: SliderProps) => {
    

    const [sliderValue, setSliderValue] = useState(defaultValue);
    const [inputValue, setInputValue] = useState(defaultValue);

    const handleSliderChange = (event: Event, newValue: number | number[]) => {
        setSliderValue(newValue as number);
        setInputValue(newValue as number);
    };

    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        const newValue = parseFloat(event.target.value);
        if (Number.isNaN(newValue)) {
            setInputValue(0);
            setSliderValue(0);
        }
        else if (newValue >= min && newValue <= max) {
            setInputValue(newValue);
            setSliderValue(newValue);
        }
    };

    return (
        <div className="slider-container">
            <OutlinedInput
                endAdornment={
                    helperText ? (
                        <InputAdornment className="end-adornment" position="end">
                            <Typography className='text-small text-title '>{helperText}</Typography>
                        </InputAdornment>
                    ) : null
                }
                value={inputValue}
                onChange={handleInputChange}
                className="input-box"
            />

            <MuiSlider
                className='slider-bar  sliderthumb'
                size={size}
                min={min}
                max={max}
                step={step}
                marks={marks}
                color={color}
                aria-label={label}
                value={sliderValue}
                onChange={handleSliderChange}
                valueLabelDisplay={valueLabelDisplay}
                orientation={orientation}
                disabled={disabled}
            />
        </div>
    );
};