import { SessionProvider } from "next-auth/react";
import { FC, PropsWithChildren, useEffect, useState } from "react";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import { TouchBackend } from "react-dnd-touch-backend";
import { QueryClient, QueryClientProvider } from "react-query";
import { AuthProvider } from "./authContext";
import { CardProvider } from "./CardContext";
import { ColorProvider } from "./ColorContext";
import { ContractProvider } from "./ContractProvider";
import { HistoricoMenuProvider } from "./historicoMenusContext";
import { ImagemProvider } from "./imageContext";
import { KanbanProvider } from "./kanbanContext";
import { LoadPageMenusProvider } from "./LoadContext";
import { LoadPageProvider } from "./LoadPageContext";
import { LojaProvider } from "./lojaContext";
import { OrdemServicoProvider } from "./OrdemServicoContext";
import { ProposalProvider } from "./ProposalContext";
import { ScreenProvider } from "./ScreenContext";
import { SocketProvider } from "./SocketContext";
import { UsuarioProvider } from "./userContext";
const queryClient = new QueryClient();

const ContextProvider: FC<PropsWithChildren> = ({ children }) => {
  const key = "u-znlQ.04CT5A:zcvEuD6E2vJ5A7ks60eSyH3J7gtBlwBfFEnfnLCLOs0";
  const options = {
    // scrollAngleRanges: [{ start: 300 }, { end: 60 }, { start: 120, end: 240 }],
    // enableMouseEvents: true,
    enableHoverOutsideTarget: true,
  };
  // const client = new Ably.Realtime.Promise(key);
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    const updateMenuView = () => {
      const windowSize = window.innerWidth;
      setIsMobile(windowSize < 640);
    };
    updateMenuView();

    window.addEventListener("resize", updateMenuView);

    // Cleanup function to remove event listener when component unmounts
    return () => {
      window.removeEventListener("resize", updateMenuView);
    };
  }, []);
  //não remover o sync provider, ele é usado para sincronização global do app
  return (
    <SessionProvider>
      <AuthProvider>
        <LojaProvider>
          <HistoricoMenuProvider>
            <ScreenProvider>
              <LoadPageMenusProvider>
                <ColorProvider>
                  <UsuarioProvider>
                    <ImagemProvider>
                      <LojaProvider>
                        {/* <AblyProvider client={client}> */}
                        <CardProvider>
                          <SocketProvider>
                            <DndProvider
                              backend={isMobile ? TouchBackend : HTML5Backend}
                            >
                              <KanbanProvider>
                                <QueryClientProvider client={queryClient}>
                                  <ContractProvider>
                                    <ProposalProvider>
                                      <OrdemServicoProvider>
                                        <LoadPageProvider>
                                          {children}
                                        </LoadPageProvider>
                                      </OrdemServicoProvider>
                                    </ProposalProvider>
                                  </ContractProvider>
                                </QueryClientProvider>
                              </KanbanProvider>
                            </DndProvider>
                          </SocketProvider>
                        </CardProvider>
                        {/* </AblyProvider> */}
                      </LojaProvider>
                    </ImagemProvider>
                  </UsuarioProvider>
                </ColorProvider>
              </LoadPageMenusProvider>
            </ScreenProvider>
          </HistoricoMenuProvider>
        </LojaProvider>
      </AuthProvider>
    </SessionProvider>
  );
};

export default ContextProvider;