<script setup lang="ts">
import { computed } from 'vue'
import { connectionStatus } from './stores/connection-status'
import { ros } from './ts/ros_client'
import { rosBackend } from './ts/robot_bridge'

const store = connectionStatus()
const connected = computed(() => {
  return store.backendConnected && store.rosbridgeConnected
})

const reconnect = () => {
  ros.manualConnect()
  rosBackend.manualConnect()
}

const rosout = ros.ros.Topic({
  name: '/rosout',
  messageType: 'rcl_interfaces/msg/Log',
})

rosout.subscribe((msg) => {
  console.log(msg)
})
</script>

<template>
  <div>
    <div v-if="!connected" class="box-container">
      Connecting...
      <button id="reconnect" @click="reconnect">Reconnect</button>
    </div>
    <div class="box-container">
      <h3>Current position:</h3>
    </div>
  </div>
</template>

<style scoped>
.box-container {
  margin: 30px;
  padding: 10px;
  border: 2px solid white;
}

#reconnect {
  margin-left: 2rem;
  background-color: green;
}
</style>
