import { useAuth } from '@/hooks/useAuth'
import { useGame, useUpdateGameState, useUpdateMoney } from '@/hooks/useGame'
import { useQuery } from '@tanstack/react-query'
import { ReactNode, useEffect } from 'react'

export default function GameProvider({ children }: { children: ReactNode }) {
  const auth = useAuth()
  const game = useGame()
  const updateGameState = useUpdateGameState()
  const updateMoney = useUpdateMoney()

  const gameQuery = useQuery({
    queryKey: ['get-game'],
    queryFn: () => fetch(`${process.env.EXPO_PUBLIC_TRAINTRAPE_MOI_SERVER}/game/`, {
      headers: { "Authorization": `Bearer ${auth.token}` }}
    ).then(resp => resp.json()),
    enabled: auth.loggedIn,
    refetchInterval: 5000,
  })
  useEffect(() => {
    if (gameQuery.isSuccess && gameQuery.data)
      updateGameState(gameQuery.data)
  }, [gameQuery])

  const playerQuery = useQuery({
    queryKey: ['get-player'],
    queryFn: () => fetch(`${process.env.EXPO_PUBLIC_TRAINTRAPE_MOI_SERVER}/players/${game.playerId}/`, {
      headers: { "Authorization": `Bearer ${auth.token}` }}
    ).then(resp => resp.json()),
    enabled: auth.loggedIn && !!game.playerId,
    refetchInterval: 5000,
  })
  useEffect(() => {
    if (playerQuery.isSuccess && playerQuery.data)
      updateMoney(playerQuery.data.money)
  }, [playerQuery])

  return <>
    {children}
  </>
}