// Sélection des éléments
const initialSetupButton = document.getElementById("initialSetup");
const referenceVolumeInput = document.getElementById("referenceVolume");
const setVolumeButton = document.getElementById("setVolume");
const toggleVisualizationButton = document.getElementById("toggleVisualization");
const volumeVisualization = document.getElementById("volumeVisualization");
const saveSettingsButton = document.getElementById("saveSettings");

// Vérifiez si la configuration initiale a été effectuée
chrome.storage.local.get("setupCompleted", (result) => {
  if (result.setupCompleted) {
    initialSetupButton.disabled = true;
    initialSetupButton.textContent = "Configuration terminée";
  } else {
    initialSetupButton.disabled = false;
  }
});

// Gestion du bouton Configuration initiale
initialSetupButton.addEventListener("click", () => {
  chrome.runtime.sendMessage({ action: "runInstaller" }, (response) => {
    if (chrome.runtime.lastError) {
      alert("Erreur lors de la communication avec l'installeur : " + chrome.runtime.lastError.message);
      return;
    }
    if (response && response.success) {
      alert("Configuration initiale effectuée avec succès !");
      chrome.storage.local.set({ setupCompleted: true }, () => {
        initialSetupButton.disabled = true;
        initialSetupButton.textContent = "Configuration terminée";
      });
    } else {
      alert("Erreur lors de la configuration initiale : " + (response?.error || "Réponse invalide"));
    }
  });
});

let isVisualizationActive = false; // État de la visualisation
let visualizationInterval = null; // Intervalle pour la visualisation

// Activer/désactiver la visualisation
toggleVisualizationButton.addEventListener("click", () => {
  isVisualizationActive = !isVisualizationActive;

  // Met à jour le texte du bouton
  toggleVisualizationButton.textContent = isVisualizationActive
    ? "Désactiver la visualisation"
    : "Activer la visualisation";

  // Démarrer ou arrêter la visualisation
  if (isVisualizationActive) {
    startVisualization();
  } else {
    stopVisualization();
  }
});

// Démarrer la visualisation
function startVisualization() {
  visualizationInterval = setInterval(() => {
    chrome.runtime.sendMessage({ action: "getCurrentVolume" }, (response) => {
      if (chrome.runtime.lastError) {
        console.error("Erreur lors de la récupération du volume : " + chrome.runtime.lastError.message);
        return;
      }
      if (response && response.currentVolume !== undefined) {
        // Met à jour la largeur de la barre en fonction du volume
        volumeVisualization.style.width = `${response.currentVolume}%`;
        
        // Ajuste la couleur en fonction du volume
        const red = Math.min(255, Math.max(0, (response.currentVolume - 50) * 5));
        const green = Math.min(255, Math.max(0, (100 - response.currentVolume) * 5));
        volumeVisualization.style.backgroundColor = `rgba(${red}, ${green}, 0, 0.3)`;
      } else {
        console.warn("Réponse invalide pour le volume actuel.");
      }
    });
  }, 500); // Mise à jour toutes les 500 ms
}

// Arrêter la visualisation
function stopVisualization() {
  if (visualizationInterval !== null) {
    clearInterval(visualizationInterval);
    visualizationInterval = null;
    volumeVisualization.style.width = "0%"; // Réinitialiser la barre
  }
}

// Gestion du bouton Enregistrer les paramètres
saveSettingsButton.addEventListener("click", () => {
  const tolerance = document.getElementById("tolerance").value;
  const frequency = document.getElementById("frequency").value;

  chrome.storage.local.set(
    {
      tolerance: parseFloat(tolerance),
      frequency: parseFloat(frequency),
    },
    () => {
      alert("Paramètres enregistrés avec succès !");
    }
  );
});

1. Sélection des éléments HTML

• Objectif : Récupérer les éléments HTML nécessaires pour permettre leur manipulation dans le script.
• Méthode utilisée :
  • Utilisation de document.getElementById pour sélectionner les éléments par leur ID (referenceVolume pour le slider et setVolume pour le bouton).
  • TypeScript assure une vérification de type pour s'assurer que l'élément sélectionné correspond au type attendu (HTMLInputElement ou HTMLButtonElement).

2. Écouteur sur le slider

• Objectif : Capturer les modifications en temps réel lorsque l'utilisateur ajuste le slider.
• Utilisation de addEventListener :
  • L'événement input est déclenché chaque fois que la valeur du slider change.
  • La nouvelle valeur est récupérée avec referenceVolumeInput.value et affichée dans la console.

3. Écouteur sur le bouton "Définir"

• Objectif : Envoyer la valeur choisie par l'utilisateur au script d'arrière-plan lorsqu'il clique sur le bouton.
• Validation :
  • Vérifie que la valeur entrée est un entier compris entre 0 et 100.
  • Si la validation échoue, affiche une alerte et arrête l'exécution.
• Envoi d'un message au script d'arrière-plan :
  • Utilisation de chrome.runtime.sendMessage pour transmettre les données à l'extension.
  • Structure du message :

  json
  CopierModifier
  {"action": "setVolume","volume": 50}

• • Une réponse est attendue en retour via une fonction de rappel (callback).

4. Gestion des erreurs

• chrome.runtime.lastError :
  • Vérifie si une erreur s'est produite pendant l'envoi du message (par exemple, si l'extension ne peut pas communiquer avec le script d'arrière-plan).
• Alertes utilisateur :
  • Fournit des retours visuels ou des alertes pour informer l'utilisateur du succès ou de l'échec de l'opération.