cooling_system

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

function CoolingSystem() {
  const [temperature, setTemperature] = useState(25); // Initial temperature
  const [coolingEnabled, setCoolingEnabled] = useState(false);
  const [targetTemperature, setTargetTemperature] = useState(20);
  const [fanSpeed, setFanSpeed] = useState(0); // 0: off, 1: low, 2: medium, 3: high

  useEffect(() => {
    let interval;

    if (coolingEnabled) {
      interval = setInterval(() => {
        setTemperature((prevTemp) => {
          if (prevTemp > targetTemperature) {
            const newTemp = prevTemp - 0.5; // Simulate cooling
            return newTemp < targetTemperature ? targetTemperature : newTemp;
          } else if (prevTemp < targetTemperature) {
            const newTemp = prevTemp + 0.2; // Simulate natural heating
            return newTemp > targetTemperature ? targetTemperature : newTemp;
          } else {
            return prevTemp;
          }
        });
      }, 1000); // Update every second
    } else {
      interval = setInterval(() => {
          setTemperature((prevTemp) => prevTemp + 0.1); // Simulate natural heating
      }, 1000)
    }

    return () => clearInterval(interval); // Cleanup interval on unmount or coolingEnabled change
  }, [coolingEnabled, targetTemperature]);

  useEffect(() => {
    if (coolingEnabled && temperature > targetTemperature) {
      if (temperature - targetTemperature > 5) {
        setFanSpeed(3); // High fan speed
      } else if (temperature - targetTemperature > 3) {
        setFanSpeed(2); // Medium fan speed
      } else {
        setFanSpeed(1); // Low fan speed
      }
    } else {
      setFanSpeed(0); // Turn off fan
    }
  }, [temperature, targetTemperature, coolingEnabled]);

  const handleCoolingToggle = () => {
    setCoolingEnabled(!coolingEnabled);
  };

  const handleTargetTemperatureChange = (event) => {
    const newTarget = parseInt(event.target.value);
    setTargetTemperature(newTarget);
  };

  const fanSpeedLabels = {
    0: 'Off',
    1: 'Low',
    2: 'Medium',
    3: 'High',
  };

  return (
    <div style={{ fontFamily: 'sans-serif', padding: '20px' }}>
      <h1>Cooling System</h1>
      <p>Current Temperature: {temperature.toFixed(1)}°C</p>
      <label>
        Target Temperature:
        <input
          type="number"
          value={targetTemperature}
          onChange={handleTargetTemperatureChange}
          min="15"
          max="30"
        />
      </label>
      <br />
      <button onClick={handleCoolingToggle}>
        {coolingEnabled ? 'Turn Off Cooling' : 'Turn On Cooling'}
      </button>
      <p>Cooling: {coolingEnabled ? 'Enabled' : 'Disabled'}</p>
      <p>Fan Speed: {fanSpeedLabels[fanSpeed]}</p>
      <div style={{marginTop: '20px'}}>
        <div style={{width: '200px', height: '20px', backgroundColor: 'lightblue', position: 'relative'}}>
          <div style={{width: `${(temperature-10)*3.33}%`, height: '100%', backgroundColor: 'red'}}></div>
        </div>
        <p>Temperature Visual</p>
      </div>
    </div>
  );
}

export default CoolingSystem;