import { createApp } from 'petite-vue'
import { l10nObj } from '@/helper'

import templateGuest from './templateGuest'
import wishlistPublicTemplatePro from '../public/wishlistPublicTemplatePro'
import wishlistGuestMounted from './wishlistGuest'

const loadedObject = l10nObj()
const proDependencies = loadedObject.proDependencies || {}
const activePro = proDependencies?.activePro || false

/**
 * Custom element for the wishlist app.
 */
class SavetoWishlistGuest extends HTMLElement {
  constructor() {
    super()
  }

  connectedCallback() {
    // Create container with v-scope for the app.
    const container = document.createElement('div')
    container.setAttribute('id', 'saveto-wishlist-app')
    container.setAttribute('v-scope', '')
    container.innerHTML = templateGuest
    if ( activePro ) {
      container.insertAdjacentHTML('beforeend', wishlistPublicTemplatePro)
    }
    this.appendChild(container)

    const app = createApp(wishlistGuestMounted())

    // Mount the app.
    app.mount(container)
  }
}

export default SavetoWishlistGuest