<template>
  <div class="text-white flex justify-center w-full bg-neutral-800 py-3">
    <span class="font-bold">PORT {{serialConfig.port}} is
      <span v-if="serialConfig.open" class="text-green-500 hover:cursor-pointer" @click="closePort">OPEN</span>
      <span v-else class="text-red-600 hover:cursor-pointer" @click="openPort">CLOSED</span>
    </span>
  </div>
</template>

<script setup>
import { useLocalStorage } from '@vueuse/core'
import { invoke } from "@tauri-apps/api/tauri"

const serialConfig = useLocalStorage('serialConfig', { port: '', baud: 9600, open: false })

const openPort = () => {
  try {
    invoke('open_port', { portName: serialConfig.value.port, baud: serialConfig.value.baud });
  } catch (err) {
    console.error(err);
  }
}

const closePort = async () => {
  try {
    await invoke('close_port', { portName: serialConfig.value.port, baud: serialConfig.value.baud });
  } catch (err) {
    console.error(err);
  }
}
</script>
