<script setup lang="ts">

const labelPrinter = useLabelPrinterStore()


const { $api } = useNuxtApp()

const labelWidth = ref(50)
const labelHeight = ref(30)
const zpl = ref(`^XA
^FO5,5
^GB545,325,3^FS
^CF0,30
^FO20,20^FDHello from Bluetooth!^FS
^FO20,100^BY2
^BXN,10,200
^FD12345678901234567^FS
^XZ`)



async function handlePrint() {
  const dpmm = 12
  const res = await $api("/api/print/label", {
    method: "POST",
    body: JSON.stringify({
      zpl: zpl.value,
      width: labelWidth.value,
      height: labelHeight.value,
      dpmm,
    }),
  })
  await labelPrinter.print(res, { density: 5, pages: 1 })
}
</script>

<template>
  <UCard class="p-4">
    <div class="flex gap-2 mb-2">
      <UButton @click="labelPrinter.connect('serial')">Connect S </UButton>
      <UButton @click="labelPrinter.connect('ble')">Connect B</UButton>
      <UButton color="red" @click="labelPrinter.disconnect">Disconnect</UButton>
      <UButton color="primary" @click="handlePrint" :disabled="!labelPrinter.connected">Print</UButton>
    </div>

    {{labelPrinter.info}}

    {{labelPrinter.printProgress}}

    <UFormGroup label="Breite">
      <UInput v-model="labelWidth"><template #trailing>mm</template></UInput>
    </UFormGroup>
    <UFormGroup label="Höhe">
      <UInput v-model="labelHeight"><template #trailing>mm</template></UInput>
    </UFormGroup>
    <UFormGroup label="ZPL">
      <UTextarea v-model="zpl" rows="6" />
    </UFormGroup>
  </UCard>
</template>
