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";
function Objet() {
  const identifiant = new URLSearchParams(window.location.search).get("id");
  const [searchQuery, setSearchQuery] = useState("");
  const [activeFilter, setActiveFilter] = useState("all");
  const [object, setObject] = useState({});
  const [graphStates, setGraphStates] = useState({
    wind:false,
    temperature:false,
    pressure:false,
    humidity:false,
  })
  const [afficherModif, defafficherModif] = useState(false);
  const [AffWindGraph, defAffWindGraph] = useState(false);
  const [AffTempGraph, defAffTempGraph] = useState(false);
  const [AffPressionGraph, defAffPressionGraph] = useState(false);
  const [AffHumiditeGraph, defAffHumideGraph] = useState(false);
  const tempGraphRef = useRef(null);
  const pressureGraphRef = useRef(null);
  const humidityGraphRef = useRef(null);
  const windGraphRef = useRef(null);

  useEffect(() => {
    axios.get(`${API_BASE_URL}/objet?id=${identifiant}`).then((response) => {
      setObject(response.data[0]);
    });
  }, [identifiant]);
  return (
    <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} />
          )}

          {object && object.id ? (
            <WindInfo
              object={object}
              defAffWindGraph={defAffWindGraph}
              AffWindGraph={AffWindGraph}
            />
          ) : (
            <p>Chargement des données...</p>
          )}
          {object && object.id ? (
            <MeteoInfos
              object={object}
              defAffTempGraph={defAffTempGraph}
              AffTempGraph={AffTempGraph}
              defAffPressionGraph={defAffPressionGraph}
              AffPressionGraph={AffPressionGraph}
              defAffHumiditeGraph={defAffHumideGraph}
              AffHumiditeGraph={AffHumiditeGraph}
              tempGraphRef={tempGraphRef}
              pressureGraphRef={pressureGraphRef}
              humidityGraphRef={humidityGraphRef}
            />
          ) : (
            <p>Chargement des données...</p>
          )}
          <BatterieInfo object={object} />
        </div>
        {AffWindGraph &&
          (object && object.id ? (
            <WindGraph object={object} />
          ) : (
            <p>Chargement des données...</p>
          ))}
        {AffTempGraph &&
          (object && object.id ? (
            <MeteoGraph
              object={object}
              categorie={"temperature"}
              Logo={Thermometer}
            />
          ) : (
            <p>Chargement des données...</p>
          ))}
        {AffPressionGraph &&
          (object && object.id ? (
            <MeteoGraph
              object={object}
              categorie={"pressure"}
              Logo={CircleGauge}
            />
          ) : (
            <p>Chargement des données...</p>
          ))}
        {AffHumiditeGraph &&
          (object && object.id ? (
            <MeteoGraph object={object} categorie={"humidity"} Logo={Droplet} />
          ) : (
            <p>Chargement des données...</p>
          ))}
      </div>
    </div>
  );
}
export default Objet;