import React, { useEffect, useState } from "react";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  ReferenceLine,
} from "recharts";

import { Wind } from "lucide-react";
import axios from "axios";
import { API_BASE_URL } from "../config";

function MeteoGraph({ object, categorie, Logo,reference}) {
  const [rawData, setRawData] = useState([]);
  const identifiant = object.id;
  useEffect(() => {
    axios.get(`${API_BASE_URL}/meteo?id=${identifiant}`).then((response) => {
      setRawData(response.data);
    });
  }, [object]);
  useEffect(() => {
    if (reference?.current) {
      reference.current.scrollIntoView({ behavior: "smooth" });
    }
  }, [reference]);
  function getAvg() {
    let moyenne = 0;
    rawData.forEach((element) => {
      if(element){
        moyenne += element[categorie];
      }
    });
    return moyenne / rawData.length;
  }
  return (
    <div
      ref={reference}
      key={object.id}
      className="bg-white mb-6 p-6 rounded-xl min-w-5xl"
      style={{ width: "100%", height: "400px" }}

    >
      <div className="flex align-items gap-6">
        <div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
          <Logo className="text-indigo-600" size={24} />
        </div>
        {categorie === "temperature" ? (
          <h1 className="text-black text-2xl font-bold mb-1  ">
            Historique de la température
          </h1>
        ) : categorie === "humidity" ? (
          <h1 className="text-black text-2xl font-bold mb-1  ">
            Historique de l'humidité
          </h1>
        ) : (
          <h1 className="text-black text-2xl font-bold mb-1  ">
            Historique de la pression
          </h1>
        )}
      </div>
      <ResponsiveContainer width="100%" height="100%">
        <LineChart
          width={500}
          height={300}
          data={rawData}
          margin={{
            top: 5,
            right: 30,
            left: 10,
            bottom: 60,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="timestamp" />
          <YAxis />
          <Tooltip />
          <Legend />
          <Line
            type="monotone"
            dataKey={categorie}
            stroke="#8884d8"
            activeDot={{ r: 8 }}
          />
          <ReferenceLine y={getAvg()} label="Moyenne" stroke="red" />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

export default MeteoGraph;