import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import Ripple from './directives/ripple'
import { tooltipDirective } from './directives/tooltip'
import { BarcodeDetector, prepareZXingModule } from 'barcode-detector/ponyfill'

// Configure BarcodeDetector polyfill to use local WASM file
try {
  prepareZXingModule({
    overrides: {
      locateFile: (path, prefix) => {
        if (path.endsWith('.wasm')) {
          return '/wasm/zxing_reader.wasm'
        }
        return prefix + path
      }
    }
  })

  // Force usage of polyfill to avoid CSP issues and ensure consistent behavior
  // Native implementation might fail or be missing in some browsers
  window.BarcodeDetector = BarcodeDetector
} catch (e) {
  console.error('Failed to initialize BarcodeDetector polyfill', e)
}

const app = createApp(App)

app.directive('ripple', Ripple)
app.directive('tooltip', tooltipDirective)
app.use(router)
app.mount('#app')