<script setup lang="ts">
import { useTemplateRef } from 'vue'
import { useBarcodeDetector } from '@orbisk/vue-use-barcode-detection'

const video = useTemplateRef<HTMLVideoElement>('video')
const { isSupported, detected, error, isActive, start, stop } = useBarcodeDetector(video)
</script>

<template>
  <video ref="video" playsinline muted />
  <button @click="isActive ? stop() : start()">
    {{ isActive ? 'Stop' : 'Start camera' }}
  </button>
</template>

<script setup lang="ts">
import { useTemplateRef } from 'vue'
import { useBarcodeDetector } from '@orbisk/vue-use-barcode-detection'

const img = useTemplateRef<HTMLImageElement>('img')
const { detected } = useBarcodeDetector(img, { immediate: true })
</script>

<template>
  <img ref="img" src="/barcode.png" alt="" />
</template>

const { detect } = useBarcodeDetector()
const file = await fetch('/barcode.png').then((r) => r.blob())
const result = await detect(file)

// Stop on any barcode
const { detected, start } = useBarcodeDetector(video, { once: true })
// later, from a click handler:
await start()

// Stop only on QR codes
useBarcodeDetector(video, {
  once: true,
  accept: (b) => b.format === 'qr_code',
})

// Stop only on values starting with `XX-`
useBarcodeDetector(video, {
  once: true,
  accept: (b) => b.rawValue.startsWith('XX-'),
})

const onlyQr = ref(false)

const formats = computed<BarcodeFormat[] | undefined>(() =>
  onlyQr.value ? ['qr_code'] : undefined,
)

useBarcodeDetector(video, {
  formats, // rebuilds the BarcodeDetector when `onlyQr` flips
  once: onlyQr, // stop on first hit *only* in QR-only mode
})

const prefix = ref('')
useBarcodeDetector(video, {
  accept: (b) => !prefix.value || b.rawValue.startsWith(prefix.value),
})

<script setup lang="ts">
import { UseBarcodeDetector } from '@orbisk/vue-use-barcode-detection'
</script>

<template>
  <UseBarcodeDetector v-slot="{ start, stop, isActive, detected }">
    <button @click="isActive ? stop() : start()">
      {{ isActive ? 'Stop' : 'Start camera' }}
    </button>
    <ul>
      <li v-for="b in detected" :key="b.rawValue">
        <strong>{{ b.format }}</strong> — <code>{{ b.rawValue }}</code>
      </li>
    </ul>
  </UseBarcodeDetector>
</template>

<template>
  <UseBarcodeDetector v-slot="{ detected, error, isSupported }">
    <p v-if="!isSupported">BarcodeDetector is not available.</p>
    <p v-else-if="error">{{ error.message }}</p>
    <ul>
      <li v-for="b in detected" :key="b.rawValue">
        <strong>{{ b.format }}</strong> — <code>{{ b.rawValue }}</code>
      </li>
    </ul>
  </UseBarcodeDetector>
</template>

<template>
  <UseBarcodeDetector>
    <template #overlay="{ detected, source }">
      <BarcodeDetectorOverlay
        :detected="detected"
        :source="source"
        stroke="hotpink"
        :stroke-width="6"
      />
    </template>
  </UseBarcodeDetector>
</template>

<template>
  <UseBarcodeDetector headless v-slot="{ setSource, detected, start, stop, isActive }">
    <video :ref="setSource" playsinline muted autoplay />
    <button @click="isActive ? stop() : start()">
      {{ isActive ? 'Stop' : 'Start' }}
    </button>
    <pre>{{ detected }}</pre>
  </UseBarcodeDetector>
</template>

<script setup lang="ts">
import { ref, useTemplateRef, watch } from 'vue'
import {
  BarcodeDetectorOverlay,
  type DetectedBarcode,
  useBarcodeDetector,
} from '@orbisk/vue-use-barcode-detection'
import { useQRCode } from '@vueuse/integrations/useQRCode'

const text = ref('Hello, scanner!')
const prefix = ref('')

const accept = (b: DetectedBarcode) =>
  !prefix.value || b.rawValue.startsWith(prefix.value)

// Fixed-size QR keeps the viewBox reactive-safe: img.naturalWidth is a
// non-reactive DOM property, so a computed reading it would never refresh
// once the image loads, leaving the SVG with a 0×0 coordinate space.
// `margin: 4` keeps the QR-spec quiet zone — Chrome's BarcodeDetector
// frequently refuses to lock on QRs with a smaller margin.
const qrSrc = useQRCode(text, { width: 320, margin: 4 })

const img = useTemplateRef<HTMLImageElement>('img')
const { detect, detected, rejected } = useBarcodeDetector(img, { accept })

watch([qrSrc, prefix], () => {
  if (img.value?.complete) void detect()
})
</script>

<template>
  <input v-model="text" />
  <input v-model="prefix" placeholder="required prefix" />
  <div class="stage">
    <!-- No `crossorigin` — data: URLs are same-origin; setting it can taint
         the canvas BarcodeDetector reads from. -->
    <img ref="img" :src="qrSrc" @load="detect" />
    <BarcodeDetectorOverlay
      :detected="detected"
      :rejected="rejected"
      :source="img"
      :label="(b, accepted) => (accepted ? b.rawValue : 'invalid')"
    />
  </div>
</template>

<script setup lang="ts">
import { BarcodeDetectorOverlay, UseBarcodeDetector } from '@orbisk/vue-use-barcode-detection'
</script>

<template>
  <UseBarcodeDetector>
    <template #overlay="{ detected, source }">
      <BarcodeDetectorOverlay :detected="detected" :source="source" stroke="hotpink" />
      <span class="badge">{{ detected.length }} found</span>
    </template>
  </UseBarcodeDetector>
</template>

<script setup lang="ts">
import type { DetectedBarcode } from '@orbisk/vue-use-barcode-detection'
import { UseBarcodeDetector } from '@orbisk/vue-use-barcode-detection'

// Only QR codes count — everything else gets the rejected styling.
const onlyQr = (b: DetectedBarcode) => b.format === 'qr_code'
</script>

<template>
  <UseBarcodeDetector
    once
    :accept="onlyQr"
    v-slot="{ detected, rejected, isActive, start, stop }"
  >
    <button @click="isActive ? stop() : start()">
      {{ isActive ? 'Stop' : 'Start camera' }}
    </button>
    <p v-if="rejected.length && !detected.length">
      Found {{ rejected.length }} barcode(s), but none are QR codes — keep moving the camera.
    </p>
    <ul>
      <li v-for="b in detected" :key="b.rawValue">
        <strong>{{ b.format }}</strong> — <code>{{ b.rawValue }}</code>
      </li>
    </ul>
  </UseBarcodeDetector>
</template>

<script setup lang="ts">
import { useTemplateRef } from 'vue'
import {
  BarcodeDetectorOverlay,
  type DetectedBarcode,
  useBarcodeDetector,
} from '@orbisk/vue-use-barcode-detection'

const video = useTemplateRef<HTMLVideoElement>('video')
const { detected, rejected, start, isActive } = useBarcodeDetector(video, {
  accept: (b: DetectedBarcode) => b.format === 'qr_code',
  once: true,
})
</script>

<template>
  <div class="stage">
    <video ref="video" playsinline muted />
    <BarcodeDetectorOverlay :detected="detected" :rejected="rejected" :source="video" />
  </div>
  <button v-if="!isActive" @click="start">Start camera</button>
</template>

<BarcodeDetectorOverlay
  :detected="detected"
  :rejected="rejected"
  :source="video"
  stroke="lime"
  rejected-stroke="orange"
  rejected-fill="rgba(255, 165, 0, 0.1)"
/>

<template>
  <ClientOnly>
    <UseBarcodeDetector />
  </ClientOnly>
</template>

<script setup lang="ts">
import { useTemplateRef } from 'vue'
import { UseBarcodeDetector } from '@orbisk/vue-use-barcode-detection'

const scanner = useTemplateRef<InstanceType<typeof UseBarcodeDetector>>('scanner')

function rescan() {
  scanner.value?.stop()
  scanner.value?.start()
}
</script>

<template>
  <UseBarcodeDetector ref="scanner" />
  <button @click="rescan">Restart</button>
</template>