<template>
  <div class="w-h-full fixed">
    <EarthView ref="earthViewInstance" />
  </div>
  <div class="w-h-full fixed grid grid-cols-2 p-10 front-container">
    <div class="text-left">
      <SNRView ref="snrViewInstance" />
    </div>
    <div class="text-center w-1/2 ml-auto">
      <PlanisphereView ref="planisphereViewInstance" />
    </div>
    <div class="text-left">
      <NMEAView ref="nmeaViewInstance" />
    </div>
    <div class="text-center w-1/2 ml-auto">
      <BaseInfoView ref="baseInfoViewInstance" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import SNRView from './components/SNRView.vue'
import NMEAView from './components/NMEAView.vue'
import EarthView from './components/EarthView.vue'
import BaseInfoView from './components/BaseInfoView.vue'
import PlanisphereView from './components/PlanisphereView.vue'


const nmeaViewInstance        = ref(null)
const snrViewInstance         = ref(null)
const earthViewInstance       = ref(null)
const baseInfoViewInstance    = ref(null)
const planisphereViewInstance = ref(null)


onMounted(() => {
if ('ipcRenderer' in window) {
  ipcRenderer.receive('NMEA_RECEIVED', nmeaViewInstance.value.update)

  ipcRenderer.receive('NMEA_HANDLED' , (nmeaStr: string) => {
    const nmea = JSON.parse(nmeaStr)
    
    snrViewInstance.value.update(nmea)
    earthViewInstance.value.update(nmea)
    baseInfoViewInstance.value.update(nmea)
    planisphereViewInstance.value.update(nmea)
  })

  ipcRenderer.send('APP_MOUNTED')
}
})
</script>

<style scoped>
.front-container {
  grid-template-rows: 55vh;
  background: linear-gradient(to right, rgba(17, 24, 39, 0.8) , transparent, rgba(17, 24, 39, 0.8));
}
</style>
