import { useCallback, useEffect, useRef, useState } from 'react'
import reactLogo from '../assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { useUserAPI } from '../providers/pond/userAPI'
import { useAuth0 } from '@auth0/auth0-react'
import { or } from '../utils/types'
import LoadingScreen from './LoadingScreen'
import { pond } from "protobuf-ts/pond";


export default function UserWrapper() {
  const [count, setCount] = useState(0)
  const [loading, setLoading] = useState(false)
  const userAPI = useUserAPI();
  const useAuth = useAuth0();
  const hasFetched = useRef(false);
  const [user, setUser] = useState<pond.User | undefined>(undefined)

  let user_id = or(useAuth.user?.sub, "")

  const loadUser = useCallback(() => {
    if (hasFetched.current) return;
    setLoading(true)
    userAPI.getUser(user_id).then(resp => {
        setUser(resp)
    }).finally(() => {
        setLoading(false)
        hasFetched.current = true;
    })
  }, [])
  
  useEffect(() => {
    if (loading) return;
    loadUser()
  }, [loading])

  if (!user || loading) return (
    <LoadingScreen
      message={"Loading user profile..."}
    />
  )

  return (
    <><div>
        <a href="https://vitejs.dev" target="_blank">
            <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
            <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
            count is {count}
        </button>
        <p>
            Hello, {user.settings?.name}!
        </p>
        </div><p className="read-the-docs">
            Coming soon
        </p>
    </>
  )
}