// in our client.js
let growthbook
if ("gtag" in window) {
  // If !window.gtag is unavailable (and it likely will be), this never runs
  window.gtag('get', env.GA_TRACKING_ID, 'client_id', (clientId) => {
    growthbook = new GrowthBook({
      apiHost: env.GROWTHBOOK_HOST,
      clientKey: env.GROWTHBOOK_KEY,
      attributes: {
        client_id: clientId
      },
      enableDevMode: true,
      trackingCallback: (experiment, result) => {
        // track using GA4
        window.gtag("event", "experiment_viewed", {
          event_category: "experiment",
          experiment_id: experiment.key,
          variation_id: result.variationId,
        })
      }
    })
    // Load features from the GrowthBook API
    growthbook.loadFeatures()
  })
}

const render = () => {
  loadableReady(() => {
    const state = window.__APP_STATE__ || {}

    const client = createClient({ url: state.env.API_URL })
    client.hydrate(state.api)

    const loc = window.location
    const url = `${loc.origin}${loc.pathname === '/' ? '' : loc.pathname}`

    const appContext = <http://state.app|state.app> || {}

    const Root = (
      <Sentry.ErrorBoundary fallback={ErrorPage}>
        {/* potentially empty growthbook */}
        <GrowthBookProvider growthbook={growthbook}>
          <CookieProvider value={new Cookies()}>
            <ApiProvider client={client}>
              <HelmetProvider>
                <NotificationProvider>
                  <BrowserRouter>
                    <AppContext.Provider value={appContext}>
                      <App url={url} />
                    </AppContext.Provider>
                  </BrowserRouter>
                </NotificationProvider>
              </HelmetProvider>
            </ApiProvider>
          </CookieProvider>
        </GrowthBookProvider>
      </Sentry.ErrorBoundary>
    )

    hydrateRoot(document.getElementById('root'), Root )
  })
}