import React, { useEffect, useState } from "react";
import BoutonGraphique from "./BoutonGraphique";
import { Bell } from "lucide-react";
import Slider from "@mui/material/Slider";
import { API_BASE_URL } from "../config";
import axios from "axios";
import { useAuth } from "../AuthContext";
import { useTranslation } from "react-i18next";

const identifiant = new URLSearchParams(window.location.search).get("id");
function ParticularMeteo({
  type,
  data,
  Icon,
  texte1,
  texte2,
  graphStates,
  setGraphStates,
  graphRefs,
}) {
  const { t } = useTranslation();
  const {user} = useAuth();
  const [affRegles, setAffRegles] = useState(false);
  const [rangeValue, setRangeValue] = useState([0, 0]);
  const [alerteActive, setAlerteActive] = useState(false);
  const minMaxValues = {
    temperature: [-50, 60],
    pressure: [940, 1060],
    humidity: [10, 100],
  };
  const MIN = minMaxValues[type][0];
  const MAX = minMaxValues[type][1];
  const formatLabel = (value) => {
    switch (type) {
      case "temperature":
        return `${value}°C`;
      case "pressure":
        return `${value} hPa`;
      case "humidity":
        return `${value}%`;
      default:
        return value;
    }
  };
  const marks = [
    {
      value: MIN,
      label: formatLabel(MIN),
    },
    {
      value: MAX,
      label: formatLabel(MAX),
    },
  ];
  useEffect(() => {
    axios.get(`${API_BASE_URL}/getRange?id=${identifiant}`).then((response) => {
      setRangeValue([
        response.data[0][type + "_min"],
        response.data[0][type + "_max"],
      ]);
    });
  }, [identifiant]);
  const color =
    rangeValue[0] > data[type] || rangeValue[1] < data[type]
      ? "text-red-600"
      : "text-indigo-600";
  
  const defRangeData = () => {
    console.log("Données envoyées :", {
      id: identifiant,
      min: rangeValue[0],
      max: rangeValue[1],
      type,
    });
    axios
      .post(`${API_BASE_URL}/modifRangeData`, {
        id: identifiant,
        idUser:user.id,
        min: parseFloat(rangeValue[0]),
        max: parseFloat(rangeValue[1]),
        type,
      })
      .then((response) => {
        console.log("Modification réussie :", response.data);
      })
      .catch((error) => {
        console.error("Erreur lors de la modification :", error);
      });
    window.location.reload();
  };

  const handleChange = (event, newValue) => {
    setRangeValue(newValue);
  };
  function valuetext(value) {
    return `${value}°C`;
  }
  if (data[type]) {
    return (
      <div className="bg-indigo-50 flex flex-col rounded-lg items-center w-full">
        <div className="flex align-items gap-3 w-full justify-between">
          <div className="flex align-items ml-3 gap-2">
            <div className="flex items-center">
              <Icon className={`${color}`} size={40} />
            </div>
            <div className="flex flex-col items-start">
              <h1 className={`${color} text-xl font-bold `}>{texte1}</h1>
              <h1 className={`${color} text-4xl font-bold`}>
                {Math.round(data[type])}{" "}
                <span className="text-lg">{texte2}</span>
              </h1>
            </div>
          </div>
          <div className="flex gap-2">
            {user?.role!=="user" && (
            <button
              onClick={() => {
                setAffRegles(!affRegles);
              }}
            >
              <Bell
                className={`${color} hover:pointer-events-auto`}
                size={30}
              />
            </button>
            )}
            <BoutonGraphique
              type={type}
              graphStates={graphStates}
              setGraphStates={setGraphStates}
              graphCible={graphRefs[type]}
            />
          </div>
        </div>
        {affRegles && (
          <div className="p-6">
            <h1 className="text-red-500 text-l font-semibold">
              {t('components.particularMeteo.defineLimit')}
            </h1>
            <div className="p-4">
              <Slider
                getAriaLabel={() => "Temperature range"}
                value={rangeValue}
                onChange={handleChange}
                valueLabelDisplay="auto"
                min={MIN}
                max={MAX}
                marks={marks}
                getAriaValueText={valuetext}
                disableSwap
              />
            </div>
            {color=="text-red-600" &&(
              <p className="text-red-500 text-l mb-2">{t('components.particularMeteo.outOfBounds')}</p>
            )}
            <button
              type="button"
              onClick={() => defRangeData()}
              className="text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 dark:focus:ring-blue-800"
            >
              {t('components.particularMeteo.setAlert')}
            </button>
          </div>
        )}
      </div>
    );
  }
}

export default ParticularMeteo;