<template>
  <div class="bg-neutral-800 rounded-2xl p-5">
    <h2 class="text-white font-bold text-lg text-center mb-5">Serial</h2> 
    <div class="flex flex-col gap-y-2 items-center">
      <div class="grid grid-cols-[70px_1fr] auto-cols-auto gap-y-2">
        <label class="text-white mr-2">PORT </label>
        <input type="text" v-model="serialConfig.port">
        <label class="text-white mr-2">BAUD</label>
        <input type="number" v-model="serialConfig.baud">
      </div>
      <span class="text-white mt-3 font-bold">Available ports:</span>
      <span v-for="port in ports" class="text-white hover:cursor-pointer bg-neutral-900 rounded w-full px-3 py-1 hover:bg-opacity-50" @click="serialConfig.port = port">
        {{ port }}
      </span>
    </div>
  </div>
</template>

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

const ports = ref([])

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

const getSerialPorts = async () => {
  return await invoke('get_serial_ports');
}

onMounted(async () => {
  ports.value = await getSerialPorts()
})
</script>
