import { memo } from "react"
import { Login } from "./Login"
import { LoggedIn } from "./LoggedIn"
import { gql, useQuery } from "~/generated/graphql"

export const AuthQuery = gql<"AuthStateQuery">`
  query AuthStateQuery {
    remoteInfo {
      dbName
      diskFormatVersion
      docCount
      docDeleteCount
      idbAttachmentFormat
      instantStartTime
      purgeSeq
      sizes {
        active
        external
        file
      }
      sqlitePlugin
      updateSeq
    }
  }
`

export const Auth = memo(() => {
  const { data } = useQuery(AuthQuery)
  const info = data?.remoteInfo

  if (!info) {
    return <Login />
  }

  return <LoggedIn data={info} />
})
