<template>
    <v-label class="title-style-1">Paramètres</v-label>
    <v-divider :thickness="2" class="border-opacity-100" color="primary"/>
    <v-label class="title-style-2">Son</v-label>
    <div class="mutltiple-per-line">
      <v-switch hide-details label="Activer le son intégré" v-model="EmbeddedSound" class="ml-15" color="primary"/>
      <div>
        <v-slider hide-details class="v-slider-style ml-15" :disabled="EmbeddedSound === false" v-model="EmbeddedSoundVolume" color="primary"/>
      </div>
    </div>
    <v-switch label="Activer le son MQTT" v-model="MQTTSound" class="ml-15" color="primary"/>

    <v-divider />
    <v-label class="title-style-2">Affichage</v-label>

    <v-switch label="Activer l'affichage des sattelites" v-model="SattelitesDisplay" class="ml-15" color="primary"/>
    <v-divider />
    <v-label class="title-style-2">MQTT</v-label>
    
    <div class="mutltiple-per-line">
      <v-icon v-model="MQTTBrokerState" class="ml-15 mb-5" color="error" icon="record">mdi-record</v-icon>
      <v-label class="ml-2 mb-10 mt-5">Etat du serveur MQTT</v-label>
      <v-btn class="ml-10 mb-5" color="primary" @click="goToDebugRoute">Debugger</v-btn>

    </div>
    <v-divider />
</template>

  
<script setup>
  import { ref, onMounted, watch } from 'vue';
  import { useRouter } from 'vue-router';

  const EmbeddedSound = ref(false);  // Définition d'une référence pour la case à cocher. Initialement décochée.
  const EmbeddedSoundVolume = ref(50);  // Définition d'une référence pour la case à cocher. Initialement décochée.
  const MQTTSound = ref(false);  // Définition d'une référence pour la case à cocher. Initialement décochée.
  const MQTTBrokerState = ref(false);  // Définition d'une référence pour la case à cocher. Initialement décochée.
  const SattelitesDisplay = ref(false);
  const router = useRouter();

  const goToDebugRoute = () => {
      router.push({ name: 'Debugger MQTT' }); // Redirige vers la route nommée 'debugger'
    };

  onMounted(() => {
      if (localStorage.getItem('EmbeddedSound')) {
        EmbeddedSound.value = localStorage.getItem('EmbeddedSound') === 'true';  // Si l'état de la case à cocher est stocké, le mettre dans la référence
      }  
      if (localStorage.getItem('MQTTSound')) {
        MQTTSound.value = localStorage.getItem('MQTTSound') === 'true';  // Si l'état de la case à cocher est stocké, le mettre dans la référence
      } 
      if (localStorage.getItem('EmbeddedSoundVolume')) {
        EmbeddedSoundVolume.value = localStorage.getItem('EmbeddedSoundVolume');  // Si l'état de la case à cocher est stocké, le mettre dans la référence
      } 
      if (localStorage.getItem('SattelitesDisplay')) {
        SattelitesDisplay.value = localStorage.getItem('SattelitesDisplay') === 'true';  // Added a default value for this switch
      } 
  });
  watch(EmbeddedSound, (EmbeddedSoundNewValue) => {
      if (EmbeddedSoundNewValue !== null) {
          localStorage.setItem('EmbeddedSound', EmbeddedSoundNewValue);  // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
      } 
  });
  watch(EmbeddedSoundVolume, (EmbeddedSoundVolumeNewValue) => {
      if (EmbeddedSoundVolumeNewValue !== null) {
          localStorage.setItem('EmbeddedSoundVolume', EmbeddedSoundVolumeNewValue);  // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
      } 
  });
  watch(MQTTSound, (MQTTSoundNewValue) => {

      if (MQTTSoundNewValue !== null) {
          localStorage.setItem('MQTTSound', MQTTSoundNewValue);  // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
      }  
  });
  watch(SattelitesDisplay, (SattelitesDisplaynewValue) => {
    if (SattelitesDisplaynewValue !== null) {
        localStorage.setItem('SattelitesDisplay', SattelitesDisplaynewValue);  // Added a default value for this switch
    } 
});
 
</script>

<style>
.title-style-1{
  margin-top: 20px;
  margin-bottom: 16px;
  margin-left: 20px;
  font-size: 30px;
  opacity: 100%;
  font-weight: 500;
}
.title-style-2{
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 40px;
  font-size: 25px;
  opacity: 100%;
  font-weight: 500;
}
.mutltiple-per-line{
  display: flex;
  align-items: center;
}
.v-slider-style{
  width: 250px; 
  margin-left: 16px;
  padding-top: px;
}
</style>