import CssBaseline from "@material-ui/core/CssBaseline";
import {ThemeProvider as MaterialThemeProvider} from "@material-ui/core/styles";
import {FuegoProvider} from "@nandorojo/swr-firestore";
import {AppProps} from "next/app";
import Head from "next/head";
import React from "react";
import {ThemeProvider as StyledThemeProvider} from "styled-components";

import AuthContext from "@sentrei/common/context/AuthContext";
import GlobalContext from "@sentrei/common/context/GlobalContext";
import Profile from "@sentrei/common/models/Profile";
import User from "@sentrei/common/models/User";
import {fuego} from "@sentrei/common/utils/firebase";
import {SnackbarEmitter} from "@sentrei/common/utils/snackbar";
import Authentication from "@sentrei/ui/components/Authentication";
import Snackbar from "@sentrei/ui/components/Snackbar";
import Theme from "@sentrei/ui/containers/Theme";

import "@sentrei/common/utils/nprogress";
import "@sentrei/common/utils/sentry";
import "@sentrei/web/styles/global.scss";
import "@sentrei/web/styles/nprogress.scss";

const CustomApp = ({Component, pageProps}: AppProps): JSX.Element => {
  const [user, setUser] = React.useState<User.Get | null | undefined>(
    undefined,
  );
  const [profile, setProfile] = React.useState<Profile.Get | null>(null);

  return (
    <>
      <Head>
        <title>Sentrei</title>
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width"
        />
      </Head>
      <StyledThemeProvider theme={Theme}>
        <MaterialThemeProvider theme={Theme}>
          <CssBaseline />
          <FuegoProvider fuego={fuego}>
            <AuthContext.Provider value={{profile, user, setProfile, setUser}}>
              <GlobalContext.Provider value={{snackbar: SnackbarEmitter}}>
                <Authentication />
                <Snackbar />
                <Component {...pageProps} />
              </GlobalContext.Provider>
            </AuthContext.Provider>
          </FuegoProvider>
        </MaterialThemeProvider>
      </StyledThemeProvider>
    </>
  );
};

export default CustomApp;
