import React, { useEffect, useState } from "react";

interface InputToggleProps {
  label: string; // Represents the toggle state (on/off)
  min?: number;
  max?: number;
  onClick?: () => void; // Function to handle toggle clicks
  onChange?: (value: number) => void; // Function to handle toggle clicks
  disabled?: boolean;
  value?: number;
}

const InputRange: React.FC<InputToggleProps> = ({
  label,
  onClick,
  onChange,
  min = 0,
  max = 10,
  disabled,
  value = 5,
}) => {
  const [rangeValue, setRangeValue] = useState<number>(value);

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    const newValue = parseInt(e.target.value); // Parse the value to an integer
    setRangeValue(newValue); // Update the local state

    if (onChange) {
      onChange(newValue); // Call the onChange function if it exists
    }
  }
  useEffect(() => {
    setRangeValue(value);
  }, [value]);

  return (
    <div className="input-range-container">
      <label
        htmlFor={`range-input ${value}`}
        className="label"
        onClick={onClick}
      >
        {label}
      </label>
      <div className="input-container">
        <input
          id={`range-input ${value}`}
          type="range"
          min={min}
          max={max}
          onChange={handleChange}
          disabled={disabled}
          value={rangeValue}
        />
        <input
          type="number"
          min={min}
          className="input-value"
          max={max}
          value={rangeValue}
          onChange={handleChange}
          disabled={disabled}
        />
      </div>
    </div>
  );
};

export default InputRange;