import { useEffect } from "react"
import posthog from "posthog-js"
import { PostHogProvider } from "posthog-js/react"
import { useAccount } from "wagmi"
type PosthogProviderProps = {
  children: React.ReactNode
}

export default function PosthogProvider({ children }: PosthogProviderProps) {
  const { address } = useAccount()
  useEffect(() => {
    if (typeof window !== "undefined" && process.env.NEXT_PUBLIC_POSTHOG_KEY) {
      // checks that we are client-side
      posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
        api_host: `${process.env.NEXT_PUBLIC_BASE_URL}ingest`,
        persistence_name: ".brahma.fi", // Enables cross-subdomain tracking
        persistence: "cookie", // Ensures tracking is consistent across pages
        person_profiles: "identified_only", // or 'always' to create profiles for anonymous users as well
        xhr_headers: {
          "Access-Control-Allow-Origin": "https://eu.i.posthog.com",
          "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
          "Access-Control-Allow-Headers": "Content-Type",
        },
        loaded: (posthog) => {
          if (process.env.NODE_ENV === "development") posthog.debug() // debug mode in development
        },
      })
    }
  }, [])

  useEffect(() => {
    if (address) {
      // Identify sends an event, so you want may want to limit how often you call it
      posthog?.identify(address, {
        name: address,
      })
    }
  }, [address])

  return <PostHogProvider client={posthog}>{children}</PostHogProvider>
}