import mixgather from '../index'

class ExampleApp {
  constructor() {
    this.setup()
  }

  async setup() {
    await mixgather.init({
      google: {
        id: 'G-Mock' // 'G-VMERZ4SV9S'
      },
      mixpanel: {
        token: '6a688b6265a76149d39d340730749870' // '6a688b6265a76149d39d340730749870'
      }
    })

    mixgather.page()

    this.bindEvents()
  }

  bindEvents() {
    const $eventHandler = document.querySelector('.event-handler')
    const $pageHandler = document.querySelector('.page-handler')
    const $loginHandler = document.querySelector('.login-handler')
    const $logoutHandler = document.querySelector('.logout-handler')
    const $injectConfigHandler = document.querySelector(
      '.inject-config-handler'
    )
    const $removeConfighandler = document.querySelector(
      '.remove-config-handler'
    )

    $eventHandler?.addEventListener('click', () => {
      mixgather.event('click_handler', { test: 'value' })
    })

    $pageHandler?.addEventListener('click', () => {
      mixgather.page('/another', 'Another Page')
    })

    $loginHandler?.addEventListener('click', () => {
      mixgather.setUser({ id: 'sune' })
      document.body.classList.add('is-authed')
    })

    $logoutHandler?.addEventListener('click', () => {
      mixgather.setUser({ id: null })
      document.body.classList.remove('is-authed')
      document.body.classList.remove('is-injected')
    })

    $injectConfigHandler?.addEventListener('click', () => {
      mixgather.setProperty({ globalProperty: 'value' })
      document.body.classList.add('is-injected')
    })

    $removeConfighandler?.addEventListener('click', () => {
      mixgather.setProperty({ globalProperty: null })
      document.body.classList.remove('is-injected')
    })
  }
}

new ExampleApp()