import { SessionProvider } from "next-auth/react";
import type { AppProps } from "next/app";
import "@/styles/globals.css";
import "@/styles/responsiv.css";
import "@/styles/style-content.css";
import "@/styles/dark-light.css";
import "@/styles/custom.css";
import "@/styles/tables.css";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap-icons/font/bootstrap-icons.css";
import "react-toastify/dist/ReactToastify.css";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-daterangepicker/daterangepicker.css";
import AppContext from "../AppContext";
import useAuthProvider from "@/useAuthProvider";
import { useContext } from "react";
import Loader from "@/assets/common/Loader";
import "@/styles/DataTable.css";
import "@/styles/CustomerPermissionsUpdate.css";
import "@/styles/user-profile.css";
import { CollapsedProvider } from "@/components/Context/CollapsedContext";

import { UserProvider } from "@/components/Context/UserContext";

function App({ Component, pageProps }: AppProps) {
  const auth = useAuthProvider();

  return (
    <UserProvider>
      <SessionProvider session={pageProps.session}>
        <AppContext.Provider value={auth as any}>
          {auth.loader && <Loader />}
          <CollapsedProvider>
            <Component {...pageProps} />
          </CollapsedProvider>
        </AppContext.Provider>
      </SessionProvider>
    </UserProvider>
  );
}
export default App;

export function useLoader() {
  return useContext(AppContext);
}