import { ApolloProvider } from '@apollo/client';
import { ApplicationUser, AuthClient, IdentityContext, useIdentity } from '@orchard/frontend-identity';
import React, { FC } from 'react';
import { BrowserRouter } from 'react-router-dom';
import { createApolloClient } from './apollo';
import { useAccountQuery } from './apollo/queries/account';
import { useCollaboratorQuery } from './apollo/queries/collaborator';
import MainContent from './components/mainContent';
import MainNav from './components/mainNav';
import ErrorPage from './pages/error';
import SplashPage from './pages/splash';
import { AppConfiguration } from './types';

const CLASSNAME = 'App';

interface Props {
    user: ApplicationUser;
    client: AuthClient;
    config: AppConfiguration
}

const ApolloReadyApp = () => {
    const { loading, data, error } = useAccountQuery();
    const collaborator = useCollaboratorQuery(212);
    const { user } = useIdentity();

    if (error)
        return <ErrorPage error={error} />;

    if (loading)
        return <SplashPage />;

    user.setFeatures(data.features);

    return (
        <BrowserRouter>
            <MainNav />
            <MainContent />
        </BrowserRouter>
    );
};

const AuthenticatedApp: FC<Props> = ({ user, client, config }) => {
    console.log(user);
    console.log(client);
    console.log(config);
    const apolloClient = createApolloClient(user, client, config);

    return (
        <div className={CLASSNAME}>
            <IdentityContext.Provider value={{ user, client }}>
                <ApolloProvider client={apolloClient}>
                    <ApolloReadyApp />
                </ApolloProvider>
            </IdentityContext.Provider>
        </div>
    );
};

export default AuthenticatedApp;