// src/pages/Settings.jsx
import React, { useState } from 'react';

const Settings = () => {
  // Estados para armazenar os valores dos sliders e caixas de entrada
  const [currentLimit, setCurrentLimit] = useState(32);
  const [powerLimit, setPowerLimit] = useState(0);
  const [energyLimit, setEnergyLimit] = useState(0);
  const [chargingTimeLimit, setChargingTimeLimit] = useState(0);
  const [temperatureLimit, setTemperatureLimit] = useState(60);

  const handleCurrentLimitChange = (e) => setCurrentLimit(e.target.value);
  const handlePowerLimitChange = (e) => setPowerLimit(e.target.value);
  const handleEnergyLimitChange = (e) => setEnergyLimit(e.target.value);
  const handleChargingTimeLimitChange = (e) => setChargingTimeLimit(e.target.value);
  const handleTemperatureLimitChange = (e) => setTemperatureLimit(e.target.value);

  return (
    <div className="settings-container">
      <h1 className="settings-title">Configurações Gerais</h1>

      <div className="settings-item">
        <label>Corrente Máxima de Carregamento (A):</label>
        <div className="slider-container">
          <input 
            type="range" 
            min="5" 
            max="32" 
            value={currentLimit} 
            onChange={handleCurrentLimitChange} 
          />
          <span>{currentLimit} A</span>
        </div>
      </div>

      <div className="settings-item">
        <label>Limite de Potência Máxima (W):</label>
        <div className="slider-container">
          <input 
            type="range" 
            min="1000" 
            max="10000" 
            value={powerLimit} 
            onChange={handlePowerLimitChange} 
          />
          <span>{powerLimit} W</span>
        </div>
      </div>

      <div className="settings-item">
        <label>Limite de Consumo Total de Energia (kWh):</label>
        <input 
          type="number" 
          min="0" 
          value={energyLimit} 
          onChange={handleEnergyLimitChange} 
        />
      </div>

      <div className="settings-item">
        <label>Limite de Tempo de Carregamento (h):</label>
        <input 
          type="number" 
          min="1" 
          max="24"
          value={chargingTimeLimit} 
          onChange={handleChargingTimeLimitChange} 
        />
      </div>

      <div className="settings-item">
        <label>Limite de Temperatura Máxima do EVSE (ºC):</label>
        <div className="slider-container">
          <input 
            type="range" 
            min="60" 
            max="80" 
            value={temperatureLimit} 
            onChange={handleTemperatureLimitChange} 
          />
          <span>{temperatureLimit} ºC</span>
        </div>
      </div>

      <button className="save-button">Salvar Configurações</button>
    </div>
  );
};

export default Settings;