

<template>
    <UDashboardNavbar >
      <template #left>
        <UButton
            icon="i-heroicons-chevron-left"
            variant="outline"
            @click="router.push(`/settings/labels`)"
        >
          Labels
        </UButton>
      </template>
      <template #center>
        <h1
            v-if="itemInfo"
            class="text-xl font-medium"
        >{{itemInfo.name ? `Label: ${itemInfo.name}` : (mode === 'create' ? 'Label erstellen' : 'Label bearbeiten')}}</h1>
      </template>
    </UDashboardNavbar>

    <UTabs
      :items="[{label: 'Informationen'}]"
      v-if="mode === 'show' && itemInfo"
      class="p-5"
      v-model="openTab"
    >
      <template #item="{item}">
        <UCard class="mt-5">
          <div
              v-if="item.label === 'Informationen'"
              class="flex flex-row"
          >
            <div class="w-1/2 mr-5">
              <UDivider>Allgemeines</UDivider>
              <Toolbar>
                <UButton @click="usePrintLabel('0dbe30f3-3008-4cde-8a7c-e785b1c22bfc','ZD411',useGenerateZPL(itemInfo.handlebarsZPL,{barcode:'XXX'}))">Test Druck</UButton>

              </Toolbar>
              <p>Name: {{itemInfo.name}}</p>
              <p>Breite in Zoll: {{itemInfo.widthInch}}"</p>
              <p>Höhe in Zoll: {{itemInfo.heightInch}}"</p>
              <p>ZPL:</p>
              <pre>{{itemInfo.handlebarsZPL}}</pre>

            </div>
            <div class="w-1/2">
              <UDivider>Vorschau</UDivider>
              <img
                  class="mx-auto mt-5"
                  v-if="demoZPL"
                  :src="`https://api.labelary.com/v1/printers/8dpmm/labels/${itemInfo.widthInch}x${itemInfo.heightInch}/0/${demoZPL}`"
              />
            </div>
          </div>

        </UCard>
      </template>
    </UTabs>







</template>

<script setup>

defineShortcuts({
  'backspace': () => {
    router.push("/settings/labels")
  },
  'arrowleft': () => {
    if(openTab.value > 0){
      openTab.value -= 1
    }
  },
  'arrowright': () => {
    if(openTab.value < 3) {
      openTab.value += 1
    }
  },
})

const router = useRouter()
const supabase = useSupabaseClient()
const dataStore = useDataStore()
const profileStore = useProfileStore()
const mode = useRoute().params.mode
const openTab = ref(0)

const itemInfo = ref({})

const setupPage = async () => {
  itemInfo.value = await useSupabaseSelectSingle("printLabels",useRoute().params.id,'*')
  renderDemoZPL()
}

const demoZPL = ref("")
const renderDemoZPL = () => {
  let template = Handlebars.compile(itemInfo.value.handlebarsZPL)

  demoZPL.value = template({barcode: "XXX"})
}

const printLabel = async () => {
  await supabase.from("printJobs").insert({
    tenant: profileStore.currentTenant,
    rawContent: useGenerateZPL(itemInfo.value.handlebarsZPL,{barcode:"XXX"}),
    printerName: "ZD411",
    printServer: "0dbe30f3-3008-4cde-8a7c-e785b1c22bfc"
  })
}


setupPage()


</script>

<style scoped>
img {
  border: 1px solid black
}
</style>