<script setup lang="ts">
//import HelloWorld from './components/HelloWorld.vue'
//import TheWelcome from './components/TheWelcome.vue'
import {ref, onMounted, reactive} from 'vue'
import {$mqtt} from 'vue-paho-mqtt'
import DownIcon from './icons/DownIcon.vue';
import UpIcon from './icons/UpIcon.vue';
import ChevronUpIcon from "@/components/icons/ChevronUpIcon.vue";
import ChevronDownIcon from "@/components/icons/ChevronDownIcon.vue";

const props = defineProps({
  room: String,
  position: String
})

const topicPrefix = `${props.room}/projectors/${props.position}`

const status = reactive({
  status: "-",
})

$mqtt.subscribe(`${topicPrefix}/lift/status`, (message) => {
  status.status = message;
});

function publishMQTTMsg(topic: string, msg: string) {
  console.log('Sending to [', topic, '] with message [', msg, ']')
  $mqtt.publish(topic, msg, 'Fnr')
}

const publishPrefix = ref(props.room + '/projectors/' + props.position + '/lift/')


</script>

<!--
TODO: NE HARDCODANO
-->

<template>
  <div style="display:flex; gap: 1rem">
    <div>
      <h4>Lifti ({{status.status}})</h4>

      <button
          @mousedown="publishMQTTMsg(publishPrefix + 'manual/up', '1')"
          @touchstart="publishMQTTMsg(publishPrefix + 'manual/up', '1')"
          @mouseup="publishMQTTMsg(publishPrefix + 'manual/up', '0')"
          @touchend="publishMQTTMsg(publishPrefix + 'manual/up', '0')">
        <ChevronUpIcon/>
      </button>
      <button
          @mousedown="publishMQTTMsg(publishPrefix + 'manual/down', '1')"
          @touchstart="publishMQTTMsg(publishPrefix + 'manual/down', '1')"
          @mouseup="publishMQTTMsg(publishPrefix + 'manual/down', '0')"
          @touchend="publishMQTTMsg(publishPrefix + 'manual/down', '0')">
        <ChevronDownIcon/>
      </button>
    </div>
    <div>
      <h4>Servis</h4>

      <button
          @mousedown="publishMQTTMsg(publishPrefix + 'manual/service_up', '1')"
          @touchstart="publishMQTTMsg(publishPrefix + 'manual/service_up', '1')"
          @mouseup="publishMQTTMsg(publishPrefix + 'manual/service_up', '0')"
          @touchend="publishMQTTMsg(publishPrefix + 'manual/service_up', '0')">
        <ChevronUpIcon/>
      </button>
      <button
          @mousedown="publishMQTTMsg(publishPrefix + 'manual/service_down', '1')"
          @touchstart="publishMQTTMsg(publishPrefix + 'manual/service_down', '1')"
          @mouseup="publishMQTTMsg(publishPrefix + 'manual/service_down', '0')"
          @touchend="publishMQTTMsg(publishPrefix + 'manual/service_down', '0')">
        <ChevronDownIcon/>
      </button>
    </div>
  </div>
  <div>
      <div>
        <h4>GOTO</h4>

        <button
            @click="publishMQTTMsg(publishPrefix + 'goto', 'UP')">
          <ChevronUpIcon/>
        </button>
        <button
            @click="publishMQTTMsg(publishPrefix + 'goto', 'DOWN')">
          <ChevronDownIcon/>
        </button>
      </div>
  </div>
</template>

<style scoped>
.disabled {
  opacity: .8;
  pointer-events: none;
}

button {
  padding: 1rem;
  margin: 0.1rem;
  width: 45%;
}
</style>
