<template>
   <v-container class="v-container-style-console-dmx"> 
      <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 DMX
         </v-card-title>   
         <v-container class="text-center">     
            <v-label v-if="!isConnected">Connecting...</v-label>
            <div class="button-container">
                <v-btn class="v-btn-dmx white" @click="handleButtonPress(2, 1)" :disabled="!isConnected">Rouge</v-btn>
                <v-btn class="v-btn-dmx red" @click="handleButtonPress(7, 1)" :disabled="!isConnected">Rouge</v-btn>
                <v-btn class="v-btn-dmx green" @click="handleButtonPress(8, 1)" :disabled="!isConnected">Vert</v-btn>
                <v-btn class="v-btn-dmx blue" @click="handleButtonPress(9, 1)" :disabled="!isConnected">Blue</v-btn>
            </div>
         </v-container> 
      </v-card>
   </v-container>
</template>

  <script>
  import { ref, onMounted } from 'vue';
  import { connectWebSocket, sendButtonPress } from '../../../services/light-manager-DMX.js';
  
  export default {
    setup() {
      const websocketUrl = 'ws://192.168.1.78:9999/qlcplusWS';
      const isConnected = ref(false);
  
      // Fonction pour connecter le WebSocket et mettre à jour l'état de la connexion
      const connect = () => {
        connectWebSocket(websocketUrl);
        isConnected.value = true;  // Mettre à jour l'état de la connexion
      };
  
      onMounted(() => {
        connect();
      });
  
      const handleButtonPress = (id, state) => {
        sendButtonPress(id, state);
              // Pause de 2 secondes
        setTimeout(() => {
            sendButtonPress(id, !state);
        }, 500); // 2000 millisecondes = 2 secondes
  
      };
  
      return {
        handleButtonPress,
        isConnected,
      };
    },
  };
  </script>
  
<style scoped>
  .v-container-style-console-dmx { 
      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;
  }
  .button-container{
    display: flex; /* Active le mode Flexbox */
    justify-content: space-around; /* Répartit les boutons équitablement */
    align-items: center; /* Aligne les boutons verticalement */
    text-align: center;
    margin-top: 12px;
    margin-bottom: 27px;
    margin-left: 15px;
    margin-right: 13px;
    }
  .v-btn-dmx{
    width: 100px;
    margin: 2% auto 0; /* 5% de marge en bas pour espacer les boutons */
    
  }
  .v-btn-dmx.white{ 
    background-color:#ffffff;
    color: #000000;
  }
  .v-btn-dmx.red{ 
    background-color: rgba(var(--v-theme-primary));
  }

  .v-btn-dmx.green{ 
    background-color: rgba(var(--v-theme-GreenBuzzer));
  }

  .v-btn-dmx.blue{ 
    background-color: rgba(var(--v-theme-BlueBuzzer));
  }
  </style>