<template>
  <v-container class="v-container-style">   
    <v-card tile outlined width="500">     
      <v-card-title class="card__title primary centered-title">       
        <v-icon left class="pr-5 pl-2" size="30">mdi-send</v-icon>       
        Publier une couleur    
      </v-card-title>     
      <div class="input-style">       
        <v-select label="Topic" v-model="selectedTopic" :items="topics" prepend-icon="mdi-target"></v-select>   
      </div> 
      <div class="color-picker-style">
        <v-color-picker mode="hex" v-model="selectedColor"></v-color-picker>
      </div> 
      <v-btn class="v-btn-style-validate" height="50" @click="publisCustomColor">Publier</v-btn>  
    </v-card> 
  </v-container>

</template>

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

export default {
  data() { return {   message: '', // Initialiser la variable message   
    selectedTopic: 'Selectionnez un topic',   
    selectedColor: "#FF0000",   
    topics: [     
      '/wled/all'
    ] // Liste des topics 
  }
},
  methods: { 
    publisCustomColor() {   
      publishMessage(this.selectedTopic, this.selectedColor)
    },
    
  }
}
</script>

<style>
  .v-container-style { 
    align-items: center; 
    justify-content: center;
  }
  .input-style{ 
    margin: 20px;
  }
  .v-btn-style-standalone{ 
    background-color: #d42828; /* Changez la couleur en fonction de votre thème */ 
    margin-bottom: 5%;
    margin-left: 5%;
  }
  .v-btn-style-validate{ 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    background-color: #d42828; /* Changez la couleur en fonction de votre thème */ 
    border-top-right-radius: 0%; 
    border-top-left-radius: 0%;
  }
  .centered-title { 
    text-align: center;
  }
  .color-picker-style {
    display: flex;
    align-items: left; /* Centre verticalement */
    height: 100%; /* Ajuste selon la hauteur désirée */
    width: 100%; /* Ajuste selon la hauteur désirée */
    padding-left: 5%;
  }
</style>