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

import Icon from '../../images/hum.png'; // Import de l'icône de l'humidité

import Speedometer from 'react-d3-speedometer';
import EditMenu from '../../components/DropdownEditMenu';

function DashboardCard03() {
const [humidity, setHumidity] = useState(60); // Initial humidity
const [isHovered, setIsHovered] = useState(false);

// Style pour centrer la jauge (amélioré pour une meilleure lisibilité)

const gaugeContainerStyle = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100%',
};

// Couleurs professionnelles pour la jauge d'humidité

const gaugeColors = {
startColor: '#90EE90', // Vert clair apaisant
endColor: '#007BFF', // Bleu vif pour l'accent
needleColor: '#004C9F', // Bleu foncé pour l'aiguille (plus discret)
};

const handleMouseEnter = () => {

setIsHovered(true);
};

const handleMouseLeave = () => {

setIsHovered(false);
};

const backgroundColor = isHovered ? '#F0F9FF' : '#F8F9FA'; // Couleurs subtiles

pour le hover

useEffect(() => {
const generateRandomHumidity = () => {
setHumidity(Math.floor(Math.random() * 101)); // Generate random between 0
and 100 (inclusive)
};

const intervalId = setInterval(generateRandomHumidity, 2000); // Update every 2

seconds

// Cleanup function to clear the interval when the component unmounts

return () => clearInterval(intervalId);
}, []);

return (
<div
id="DashboardCard03"
className="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 shadow-lg
rounded-sm border border-slate-200 dark:border-slate-700"
style={{ backgroundColor }}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<div className="px-5 pt-3 pb-4"> {/* Ajout d'un padding bas pour l'espacement
*/}
<header className="flex justify-between items-start mb-2">
{/* Icon */}
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="5
3.2 25 25" className="mr-0">
<rect width="24" height="24" fill="none" />
<path fill="currentColor" d="M23.476 13.993L16.847 3.437a1.04 1.04 0 0
0-1.694 0L8.494 14.044A9.986 9.986 0 0 0 7 19a9 9 0 0 0 18 0a10.063 10.063 0 0 0-
1.524-5.007M16 26a7.009 7.009 0 0 1-7-7a7.978 7.978 0 0 1 1.218-3.943l.935-
1.49l10.074 10.074A6.977 6.977 0 0 1 16 26.001" />
</svg>
<EditMenu />
</header>
<h2 className="text-lg font-semibold text-slate-800 dark:text-slate-100 mb-
1">Weather Dashboard</h2>
<div className="text-xs font-semibold text-slate-600 dark:text-slate-500
mb-1">Humidity</div>
<div className="flex items-center">
{/* Affichage de l'humidité en pourcentage */}
<div className="text-3xl font-bold text-slate-800 dark:text-slate-100 mr-
2">{humidity}%</div>
</div>
</div>
<div className="flex justify-center items-center flex-grow max-h-[128px]
xl:max-h-[128px]">
{/* Jauge demi-circulaire */}
<div style={gaugeContainerStyle}>
<Speedometer
value={humidity} // Utilisation de l'humidité comme valeur de la jauge
minValue={0}
maxValue={100}
width={200}
height={150}
ringWidth={20}
needleHeightRatio={0.7}
currentValueText={humidity + '%'} // Remplacer la chaîne statique par
la variable humidity
// Utilisation des couleurs définies pour la jauge
startColor={gaugeColors.startColor}
endColor={gaugeColors.endColor}
needleColor={gaugeColors.needleColor}
/>
</div>
</div>
</div>
);
}

export default DashboardCard03;