<script setup lang="ts">

const labelPrinter = useLabelPrinterStore()

const showPrinterInfo = ref(false)

const handleClick = async () => {
  if(labelPrinter.connected) {
    showPrinterInfo.value = true
  } else {
    await labelPrinter.connect('ble')
  }
}


</script>

<template>
  <!-- Printer Button -->

  <UModal v-model:open="showPrinterInfo">
    <template #content>
      <UCard>
        <template #header>
          <div class="flex items-center justify-between">
            <h3 class="text-lg font-semibold">Drucker Informationen</h3>
            <UButton icon="i-heroicons-x-mark" variant="ghost" @click="showPrinterInfo = false" />
          </div>
        </template>
        <p>Seriennummer: {{labelPrinter.info.serial}}</p>
        <p>MAC: {{labelPrinter.info.mac}}</p>
        <p>Modell: {{labelPrinter.info.modelId}}</p>
        <p>Charge: {{labelPrinter.info.charge}}</p>
        <p>Hardware Version: {{labelPrinter.info.hardwareVersion}}</p>
        <p>Software Version: {{labelPrinter.info.softwareVersion}}</p>
      </UCard>
    </template>
  </UModal>

  <UButton
      :icon="labelPrinter.connected ? 'i-heroicons-printer' : 'i-heroicons-printer'"
      :color="labelPrinter.connected ? 'green' : ''"
      variant="soft"
      class="w-full justify-start rounded-lg px-2.5 py-2 transition-colors hover:bg-gray-100 dark:hover:bg-gray-800"
      :loading="labelPrinter.connectLoading"
      @click="handleClick"
  >
    <span v-if="labelPrinter.connected">Drucker verbunden</span>
    <span v-else>Drucker verbinden</span>
  </UButton>
</template>

<style scoped>

</style>
