import React, { createContext, useContext, useEffect, useState } from 'react';
import {
  createTheme,
  responsiveFontSizes,
  ThemeProvider,
  StyledEngineProvider,
} from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { createApp } from '@laboratoria/sdk-js';
import { withSentry } from '../sentry';
import { withPostHog } from '../posthog';
import themeConfig from '../theme';
import '../theme/index.css';

const {
  FIREBASE_API_KEY,
  FIREBASE_PROJECT,
  LABORATORIA_CORE_API_URL,
} = process.env;

const app = createApp({
  firebaseApiKey: FIREBASE_API_KEY,
  firebaseProject: FIREBASE_PROJECT,
  coreApiUrl: LABORATORIA_CORE_API_URL,
});

const AppContext = createContext();

//
// Custom hook for usage in functional components.
//
export const useApp = () => useContext(AppContext);

//
// App Context Provider to be wrapped around the whole App.
//
export const AppProvider = ({ App, productionHostname, theme }) => {
  const [authUser, setAuthUser] = useState();
  const [user, setUser] = useState();

  useEffect(() => app.auth.onChange(({ authUser, user }) => {
    if (!authUser) {
      setAuthUser(null);
      setUser(null);
      return;
    }
    setAuthUser(authUser);
    setUser(user);
  }), []);

  const WrappedApp = withPostHog(withSentry(productionHostname, App));

  return (
    <AppContext.Provider value={{
      ...app,
      auth: {
        ...app.auth,
        authUser,
        user,
      },
    }}>
      <StyledEngineProvider injectFirst>
        <ThemeProvider
          theme={
            theme
            || responsiveFontSizes(createTheme(themeConfig), { factor: 6 })
          }
        >
          <>
            <CssBaseline />
            <WrappedApp />
          </>
        </ThemeProvider>
      </StyledEngineProvider>
    </AppContext.Provider>
  );
};