import { useEffect } from 'react'
import Router from 'next/router'
import * as ackeeTracker from 'ackee-tracker'

// global styles (css reset, fonts)
import 'assets/styles/global.css'

const PersonalApp = ({ Component, pageProps, router }) => {
  useEffect(() => {
    if (typeof window !== 'undefined') {
      window.ackeeTrackerInstance = ackeeTracker.create({
        server: 'https://analytics.moeritz.io',
        domainId: 'f20499e5-1784-48db-9182-62814881c486'
      }, {
        ignoreLocalhost: true,
        detailed: true
      })
      window.ackeeTrackerInstance.record()

      Router.events.on('routeChangeComplete', window.ackeeTrackerInstance.record())
    }
  }, [])

  return (
    <Component {...pageProps} key={router.route} />
  )
}

export default PersonalApp