import 'vite/modulepreload-polyfill'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ProFeaturesBanner from './ProFeaturesBanner.vue'

/*
 |--------------------------------------------------------------------------
 | Create Vue App for Pro Features Banner
 |--------------------------------------------------------------------------
 |
 | We instantiate a new Vue app specifically for the Pro Features Banner
 | that will be displayed on all admin pages.
 |
 */
const app = createApp(ProFeaturesBanner)

/*
 |--------------------------------------------------------------------------
 | Set window object global app property
 |--------------------------------------------------------------------------
 |
 | We set the window object global app property so that we can access it
 | within the app.
 |
 */
app.provide('$window', window)

/*
 |--------------------------------------------------------------------------
 | Use Vue plugins
 |--------------------------------------------------------------------------
 |
 | We register all the Vue plugins that we're going to use.
 |
 */
app.use(createPinia())

/*
 |--------------------------------------------------------------------------
 | Mount Vue App
 |--------------------------------------------------------------------------
 |
 | We mount the Vue app to the DOM with the target id.
 | Wait for DOM to be ready before mounting.
 |
 */
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => {
    const targetElement = document.getElementById('saveto-wishlist-pro-features-banner')
    if (targetElement) {
      app.mount('#saveto-wishlist-pro-features-banner')
    }
  })
} else {
  const targetElement = document.getElementById('saveto-wishlist-pro-features-banner')
  if (targetElement) {
    app.mount('#saveto-wishlist-pro-features-banner')
  }
}