<template>
  <v-container class="v-container-style">
    <v-card tile outlined width="600">
      <v-card-title class="card__title primary centered-title">
        <v-icon left class="pr-5 pl-2" size="30">mdi-send</v-icon>
        Publier un message
      </v-card-title>

      <div class="input-style">
        <v-text-field
          label="Topic"
          v-model="selectedTopic"
          :items="topics"
          prepend-icon="mdi-target"
        ></v-text-field>

        <v-text-field
          label="Message"
          v-model="message"
          prepend-icon="mdi-text-box"
        ></v-text-field>
      </div>

      <v-btn
        rounded
        class="v-btn-style-standalone"
        height="40"
        @click="publishBuzzerUnblock"
      >
        Déblocage<br>Buzzer
      </v-btn>

      <v-btn
        rounded
        color="RedBuzzer"
        class="v-btn-style-standalone"
        height="40"
        @click="publishBuzzer('#d42828')"
      >
        Buzzer
      </v-btn>
      <v-btn
        rounded
        color="BlueBuzzer"
        class="v-btn-style-standalone"
        height="40"
        @click="publishBuzzer('#2867d4')"
      >
        Buzzer
      </v-btn>
      <v-btn
        rounded
        color="YellowBuzzer"
        class="v-btn-style-standalone"
        height="40"
        @click="publishBuzzer('#D4D100')"
      >
        Buzzer
      </v-btn>
      <v-btn
        rounded
        color="GreenBuzzer"
        class="v-btn-style-standalone"
        height="40"
        @click="publishBuzzer('#28d42e')"
      >
        Buzzer
      </v-btn>
      <v-btn
        class="v-btn-style-validate"
        height="50"
        @click="publisCustomMessage"
      >
        Publier
      </v-btn>
    </v-card>
  </v-container>
</template>

<script setup>
import { ref } from 'vue';
import { publishMessage } from '@/services/mqttService';

// Reactive data
const message = ref('');
const selectedTopic = ref('Selectionnez un topic');
const topics = [
  'wled/all',
  'display/control',
  'sound/playsound',
  'game/score/update',
  'game/score',
  '/display/media'
];

// Methods
const publisCustomMessage = () => {
  publishMessage(selectedTopic.value, message.value);
};

const publishBuzzerUnblock = () => {
  publishMessage('vulture/buzzer/unlock', "0");
};
const publishBuzzer = (inputColor) => {
  publishMessage('vulture/buzzer/pressed/2',JSON.stringify({
                buzzer_id: 1,
                color: inputColor
            }));
  // Add a small delay before unlocking to ensure the score update is processed
  setTimeout(() => {
        publishMessage('/display/control', "pause");
  }, 100);

};
</script>

<style scoped>
.v-container-style {
  align-items: center;
  justify-content: center;
}
.input-style {
  margin: 20px;
}
.v-btn-style-standalone {
  background-color: rgba(var(--v-theme-primary));
  margin-bottom: 5%;
  margin-left: 5%;
}
.v-btn-style-validate {
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: rgba(var(--v-theme-primary));
  border-top-right-radius: 0%;
  border-top-left-radius: 0%;
}
.centered-title {
  text-align: center;
}
</style>
