<template>
  <q-page padding class="main-grid">
    <q-toolbar class="print-settings">
      <q-btn @click="openPrintPage">Open Print Page</q-btn>
      <q-input type="number" v-model="itemsW" min="1" label="Colonnes"></q-input>
      <q-input type="number" v-model="itemsH" min="1" label="Lignes"></q-input>
      <q-slider v-model="pageGap" :min="1" label></q-slider>
    </q-toolbar>
    <div class="print-preview">
      <div class="grid-container" :style="{gridTemplateColumns: `repeat(${itemsW}, 1fr)`, gridTemplateRows: `repeat(${itemsH}, 1fr)`, gap: `${pageGap/10}% ${pageGap*1.414/10}%`, padding: `${pageGap/10}% ${pageGap*1.414/10}%`}">
        <div v-for="i in (itemsW*itemsH)" :key="i" class="grid-item">
        </div>
      </div>
    </div>
  </q-page>
</template>

<script>
import QRCode from 'qrcode'

export default {
  name: 'PrintSettingsPage',
  data () {
    return {
      items: null,
      qrCodes: [],
      itemsW: 3,
      itemsH: 4,
      pageGap: 10
    }
  },
  computed: {
    urls () {
      // get root url of current page
      let rootUrl = window.location.origin
      return this.items.map(item => {
        return {
          url: `${rootUrl}/item/${item.ref}`,
          name: item.name,
          ref: item.ref
        }
      })
    }
  },
  async created () {
    let items = await this.$pb.collection('stock').getList(1, 24, {
      fields: 'ref,name',
      filter: 'deleted = false',
      sort: '-created'
    })
    this.items = items.items
  },
  methods: {
    async openPrintPage () {
      for (let url of this.urls) {
        this.qrCodes.push(
          { qr: await QRCode.toDataURL(url.url, { width: 200, margin: 0, border: 0 }), name: url.name, ref: url.ref }
        )
      }
      const printWindow = window.open('', '_blank')
      const printContent = `
        <html>
          <head>
            <style>
              @page { size: A4; margin: 1cm; }
              body { margin: 1cm; }
              .grid-container {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: repeat(4, 1fr);
                gap: 10px;
                height: 100%;
                page-break-after: always;
              }
              .grid-item {
                border: 1px solid gray;
                border-radius: 8px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 10px;
                box-sizing: border-box;
              }
            </style>
          </head>
          <body>
            ${this.qrCodes.reduce((acc, qr, index) => {
              if (index % 12 === 0) {
                acc.push([])
              }
              acc[acc.length - 1].push(qr)
              return acc
            }, []).map((group, groupIndex) => `
              <div class="grid-container">
                ${group.map(qr => `
                  <div class="grid-item">
                    <img src="${qr.qr}"/>
                    <span>${qr.name}</span>
                  </div>
                `).join('')}
              </div>
            `).join('')}
           </body>
        </html>
      `
      printWindow.document.write(printContent)
      printWindow.document.close()
    }
  }
}
</script>

<style scoped>
.main-grid {
  display: grid;
  gap: 10px;
  height: 100%;
  max-height: 100vh;
}
.print-preview {
  height: 50vh;
  aspect-ratio: 1/1.414;
  position: relative;
}
.grid-container {
  display: grid;
  gap: 10px;
  height: 100%;
  width:100%;
  page-break-after: always;
  border: 1px solid gray;
}
.grid-item {
  border: 1px solid gray;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
}
</style>
