import { useAuthFlow } from '@orchard/frontend-identity';
import * as Sentry from '@sentry/browser';
import React, { FC } from 'react';
import { render } from 'react-dom';
import AuthenticatedApp from './app';
import ErrorBoundary from './components/errorBoundary';
import { PROFILE_INSIGHTS } from './constants';
import Datadog from './datadog';
import ErrorPage from './pages/error';
import SplashPage from './pages/splash';
import { AppConfiguration } from './types';
import './styles/index.scss';

interface Props {
    config: AppConfiguration;
}

export const App: FC<Props> = ({ config }) => {
    const {
        auth0Domain,
        auth0ClientId,
        auth0Audience,
        auth0RedirectUri = window.location.origin
    } = config;

    const { client, user, error } = useAuthFlow({
        mainProfileType: PROFILE_INSIGHTS,
        clientOptions: {
            audience: auth0Audience,
            domain: auth0Domain,
            client_id: auth0ClientId,
            redirect_uri: auth0RedirectUri,
            useRefreshTokens: true
        }
    });

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

    Sentry.setUser(user);
    Sentry.setExtras(config);
    console.log('The user is:', user);
    return <AuthenticatedApp user={user} client={client} config={config} />;
};

window.initFrontend = (config, element) => {
    Sentry.init({ dsn: config.sentryDsn });
    Datadog.init(config);

    render((
        <ErrorBoundary>
            <App config={config} />
        </ErrorBoundary>
    ), element);
};