<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'

const props = defineProps({
  room: String,
  position: String,
  ctrltype: [String, null]
})

const topicstrs = [ //TODO everything else
  props.room + '/projectors/' + props.position + '/status/power',
  props.room + '/projectors/' + props.position + '/status/shutter',
  props.room + '/projectors/' + props.position + '/status/freeze',
    props.room + '/projectors/' + props.position + '/status',
]

const isUnreachable = ref(false)

const subscriptions =
  topicstrs.map(topic => {
    // console.log('subbing to', topic)
    $mqtt.subscribe(topic, (msg) => {
      // console.log('received:', topic, msg)
      handleIncomingMQTT(topic, msg)
    })
  })

function handleIncomingMQTT(topic: string, msg: string) {
  console.log('Received on', topic, 'with message', msg)
  if (topic.includes('status') && !topic.endsWith('status')) {
    //console.log(topic.split('/'))
    let typ = topic.split('/')[4]
    handleProjectorStatus(typ, msg)
  } else {
    isUnreachable.value = msg.length > 1
  }
}

function handleProjectorStatus(typ: string, msg: string) {
  console.log('handling status')
  //console.log(projStatus)
  console.debug(props.room, projStatus.power, projStatus.shutter)

  if (typ == 'power') { projStatus.power = msg == '1' }
  else if (typ == 'shutter') { projStatus.shutter = msg == '1' }
  else if (typ == 'freeze') { projStatus.freeze = msg == '1' }
}

onMounted(() => {
  // console.log('test')
  //$mqtt.publish('peepee', 'poopoo', 'Qr') // dela

})

function publishMQTTMsg(topic: string, msg: string) {
  //msg = msg.toString()
  console.log('Sending to [', topic, '] with message [', msg, ']')
  $mqtt.publish(topic, msg, 'Fnr') //todo refactor to 1 or 0 maybe
  console.log('sent')
}



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

//TODO organize better, binds, etc.

const projStatus = reactive({
  power: false,
  shutter: false,
  freeze: false,
})

</script>

<template>
  <div>
    <span v-if="isUnreachable">CONNECTION FAILED</span>
    <!-- TODO lepš -->
    <div>
      <h4>Power</h4>
      <button @click="publishMQTTMsg(publishPrefix + 'power', (!projStatus.power ? '1' : '0'))" :class="{currentlyActive: projStatus.power}">
        Turn {{ projStatus.power ? 'OFF' : 'ON' }}</button>
    </div>
    <div :class="{ disabled: !projStatus.power }">
      <div>
        <h4>Shutter</h4>
        <button @click="publishMQTTMsg(publishPrefix + 'shutter', (!projStatus.shutter ? '1' : '0'))" :class="{currentlyActive: projStatus.shutter}">
          Turn {{ projStatus.shutter ? 'OFF' : 'ON' }}</button>
      </div>
      <div>
        <h4>Freeze image</h4>
        <button @click="publishMQTTMsg(publishPrefix + 'freeze', (!projStatus.freeze ? '1' : '0'))" :class="{currentlyActive: projStatus.freeze}">
          Turn {{ projStatus.freeze ? 'OFF' : 'ON' }}</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.disabled {
  opacity: .5;
  pointer-events: none;
}
button {
  padding: 1rem;
  width: 100%;
}
</style>
