import React from "react";
import { Thermometer, CircleGauge, Droplet } from "lucide-react";

import { useEffect, useState, useRef } from "react";
import axios from "axios";
import { API_BASE_URL } from "../../config";

import InfoObjet from "../../components/InfoObject";
import ModifObject from "../../components/ModifObject";
import WindGraph from "../../components/WindGraph";
import WindInfo from "../../components/WindInfo";
import MeteoInfos from "../../components/MeteoInfos";
import MeteoGraph from "../../components/MeteoGraph";
import BatterieInfo from "../../components/BatterieInfo";
import { useAuth } from "../../AuthContext";
import UserInfosObject from "../../components/UserInfosObject";
function Objet() {
  const {user} =useAuth();
  const identifiant = new URLSearchParams(window.location.search).get("id");
  const [object, setObject] = useState({});
  const [graphStates, setGraphStates] = useState({
    wind: false,
    temperature: false,
    pressure: false,
    humidity: false,
  });
  const [afficherModif, defafficherModif] = useState(false);
  const graphRefs = {
    temperature: useRef(null),
    pressure: useRef(null),
    humidity: useRef(null),
    wind: useRef(null),
  };
  useEffect(() => {
        axios
          .post(`${API_BASE_URL}/objet`, {
            id: identifiant,
            userId:user.id,
            shouldUpdatePoints:true,
          })
          .then((response) => {
            setObject(response.data[0]);
          })
          .catch((error) => {
            console.error("Erreur lors de la récupération :", error);
          });
      }, [user]);
  return object && object.id ? (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50">
      <div className=" max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="text-center mb-5">
          <h2 className="text-4xl font-bold text-gray-900 mb-12">
            Tableau de bord - {object.name}
          </h2>
        </div>
        <div className="grid md:grid-cols-1 lg:grid-cols-3 gap-8 mb-5">
          {!afficherModif ? (
            <InfoObjet object={object} defafficherModif={defafficherModif} />
          ) : (
            <ModifObject object={object} defafficherModif={defafficherModif} />
          )}
          <WindInfo
            object={object}
            setGraphStates={setGraphStates}
            graphStates={graphStates}
            graphRefs={graphRefs}
          />
          <MeteoInfos
            object={object}
            graphStates={graphStates}
            setGraphStates={setGraphStates}
            graphRefs={graphRefs}
          />
          <BatterieInfo object={object} />
          <UserInfosObject user={object.proprio_id}/>
          
        </div>

        {graphStates.wind && <WindGraph object={object} reference={graphRefs.wind} />}
        {graphStates.temperature && (
          <MeteoGraph
            object={object}
            categorie={"temperature"}
            Logo={Thermometer}
            reference={graphRefs.temperature}
          />
        )}
        {graphStates.pressure && (
          <MeteoGraph
            object={object}
            categorie={"pressure"}
            Logo={CircleGauge}
            reference={graphRefs.pressure}
          />
        )}
        {graphStates.humidity && (
          <MeteoGraph
            object={object}
            categorie={"humidity"}
            Logo={Droplet}
            reference={graphRefs.humidity}
          />
        )}
      </div>
    </div>
  ) : (
    <h1>Erreur de récupération de l'objet</h1>
  );
}
export default Objet;