'use client'
import type { inferRouterOutputs } from '@trpc/server';
import { useUser } from '@clerk/nextjs'
import { createContext, useContext, useEffect, useState, type ReactNode } from 'react'
import { trpc } from '~/app/_trpc/Client'
import { type ChatRouter } from '~/server/routers/chat'
const MessageContext = createContext<{
  session?: inferRouterOutputs<ChatRouter>['getSession']
  messages?: inferRouterOutputs<ChatRouter>['getMessages']
  refetchMessages: () => void
  clearChat: (callback?: () => void) => void
  error: string|null
  isLoading: boolean
  clearingChat: boolean
  clearedChat: boolean
}>({
  session: undefined,
  messages: undefined,
  refetchMessages: () => undefined,
  clearChat: () => undefined,
  error: null,
  isLoading: true,
  clearingChat: false,
  clearedChat: false
})
export const useMessages = () => useContext(MessageContext)
export const MessagesProvider = ({children}:{children:ReactNode}) => {
  const [error,setError] = useState<string|null>(null)
  const [isLoading,setIsLoading] = useState<boolean>(true)
  const { isLoaded, isSignedIn } = useUser()
  const { data: session,error:sessionError,isLoading:sessionLoading} = trpc.chat.getSession.useQuery(undefined, {
    enabled: isSignedIn === true,
  })
  const { data: messages, refetch, error:messageError, isLoading:messagesLoading } = trpc.chat.getMessages.useQuery(session?.id ? session.id : "", {
    enabled: isSignedIn === true && session?.id != undefined,
  })
  const { mutate ,isPending:clearingChat,isSuccess:clearedChat } = trpc.chat.clearChat.useMutation()
  const utils = trpc.useUtils()
  const refetchMessages = () => {
    if (!isSignedIn) {
      return;
    }
      utils.chat.getMessages.invalidate()
      refetch()
  }
  const clearChat = (callback?: () => void) => {
    if (!isSignedIn) {
      if (callback) {
        callback()
      }
      return;
    }
    mutate(undefined,{onSuccess: () => {
      if (callback) {
        callback()
      }
      utils.chat.getMessages.invalidate()
    }})
  }
  useEffect(() => {
    if (isSignedIn !== true) {
      setError(null)
      return;
    }
    messageError && setError(messageError.message)
    sessionError && setError(sessionError.message)
  },[messageError,sessionError,isSignedIn])
  useEffect(() => {
    if (!isLoaded) {
      setIsLoading(true)
      return;
    }
    if (isSignedIn !== true) {
      setIsLoading(false)
      return;
    }
    setIsLoading(sessionLoading || messagesLoading)
  },[isLoaded,isSignedIn,sessionLoading,messagesLoading])
  return (
    <MessageContext.Provider value={
      {
        session: isSignedIn === true ? session : undefined,
        messages: isSignedIn === true ? messages : undefined,
        refetchMessages,
        clearChat,
        error,
        isLoading,
        clearingChat,
        clearedChat
      }
    }>
      {children}
    </MessageContext.Provider>
  )
}