<template>
   <v-container class="v-container-style-console">
     <v-card tile outlined width="500">
       <v-card-title class="card__title primary centered-title">
         <v-icon left class="pr-5 pl-2" size="40">mdi-console-line</v-icon>
         Console MQTT
       </v-card-title>
       <div class="div_topic">
         <v-select density="compact" label="Topic" v-model="selectedTopic" :items="topics" prepend-icon="mdi-target"></v-select>
         <div class="button_div_style">
            <v-btn rounded @click="resetTopicFilter" color="primary">Unfilter</v-btn>
            <v-btn rounded :class="{'scrolling-paused': scrollingState, 'scrolling-active': !scrollingState}" @click="toggleScrollingState">
              <v-icon>{{ scrollingState ? 'mdi-pause' : 'mdi-play' }}</v-icon>
            </v-btn>
         </div>
       </div>
       <v-container class="text-center">
         <!-- Afficher les messages filtrés -->
         <div v-for="(log, index) in filteredLogs" :key="index">
           <v-label class="v-label-timestamp">{{ log.timestamp }} -&nbsp;</v-label>
           <v-label class="v-label-topic-message-title">Topic :&nbsp;</v-label>
           <v-label class="v-label-topic-message">{{ log.topic }}&nbsp;</v-label>
           <v-label class="v-label-topic-message-title">Msg :&nbsp;</v-label>
           <v-label class="v-label-topic-message">{{ log.message }}</v-label>
         </div>
       </v-container>
     </v-card>
   </v-container>
 </template>

<script>
import { subscribeToTopic } from '@/services/mqttService';

export default {
  data() {
    return {
      messageLogs: [], // Stocke les messages MQTT
      selectedTopic: '', // Topic sélectionné dans la liste déroulante (vide pour afficher tous les messages)
      topics: [], // Liste des topics uniques
      scrollingState: true,
    };
  },
  created() {
    // S'abonner à tous les topics MQTT dès le départ
    subscribeToTopic('#', (topic, message) => {
      this.handleMessage(topic, message);
    });
  },
  methods: {
    // Fonction pour gérer l'ajout du message avec timestamp
    handleMessage(topic, message) {
      const timestamp = new Date().toLocaleString('fr-FR', {
        hour12: false,
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
      });
      if (this.scrollingState === true){
         // Ajouter le topic à la liste s'il n'existe pas déjà
         if (!this.topics.includes(topic)) {
         this.topics.push(topic);
         }

         // Ajouter le message avec l'horodatage et le topic
         this.messageLogs.unshift({ timestamp, topic, message });

         // Limiter la liste des messages à 26 éléments
         if (this.messageLogs.length > 20) {
         this.messageLogs.pop();
         }
      }
    },
    // Fonction pour réinitialiser la sélection du topic et afficher tous les messages
    resetTopicFilter() {
      this.selectedTopic = ''; // Réinitialiser la sélection pour afficher tous les messages
    },
    toggleScrollingState() {
      this.scrollingState = !this.scrollingState; // Réinitialiser la sélection pour afficher tous les messages
    }
  },
  computed: {
    // Filtrer les messages en fonction du topic sélectionné
    filteredLogs() {
      if (!this.selectedTopic) {
        return this.messageLogs; // Aucun filtre, afficher tous les messages
      }
      return this.messageLogs.filter((log) => log.topic === this.selectedTopic);
    },
  },
};
</script>


<style scoped>
  .scrolling-paused{
    background-color: rgba(var(--v-theme-primary)) !important;
  }
  .scrolling-active{
    background-color: rgba(var(--v-theme-success)) !important;
  }
   .button_div_style{
    justify-content: space-evenly;
    display: flex;
   }
   .div_topic{
      text-align: center !important;
      padding: 5% 4% 1% 4%;
   }
  .v-container-style-console { 
      display: flex; 
      justify-content: center;
      position: sticky;
      top: 50px; /* Distance depuis le haut de la fenêtre avant de "coller" */
  }
  .centered-title { 
      text-align: center;
  }
  .v-label-timestamp{ 
      opacity: 100%; 
      font-style: oblique;
      font-weight: 400; 
      color: #838383;
  }
  .v-label-topic-message-title{ 
      opacity: 100%; 
      font-weight: 700; 
      color: rgba(var(--v-theme-primary));
  }
  .v-label-topic-message{ 
      font-weight: 300; 
  }

</style>
