import { useEffect } from "react";
import "aos/dist/aos.css";
import "swiper/swiper-bundle.css";
import "react-h5-audio-player/lib/styles.css";
import "./App.css";
import AOS from "aos";
import { ErrorBoundary } from "react-error-boundary";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { BrowserRouter as Router } from "react-router-dom";
import { ErrorBoundaryFallback } from "@/components/ErrorBoundaryFallback";
import SplashScreen from "./components/SplashScreen";
import { Toaster } from "react-hot-toast";
import VpnDetector from "./components/VpnDetector";
import {
  mutationErrorHandler,
  requestErrorRetryHandler,
} from "./utils/error-handlers";

import UpdateDetector from "./components/UpdateDetector";
import { MultiAccountsProvider } from "@appointment/hooks/useMultipleAccounts.tsx";
import AllRoutes from "@/routes";
import useSamsungBrowserWarning from "./hooks/useSamsungBrowserWarning";
import InternetStatusDetector from "./components/InternetStatusDetector";

import "./App.css";
import LayoutWithNavigation from "./apps/new-ui/components/FooterLayout";

const preventPinchZoom = (event: TouchEvent) => {
  if (event.touches.length > 1) event.preventDefault();
};

function App() {
  useSamsungBrowserWarning();
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: Infinity,
        retry: requestErrorRetryHandler,
      },
      mutations: {
        onError: mutationErrorHandler,
      },
    },
  });

  useEffect(() => {
    AOS.init({
      duration: 1200,
    });

    document.addEventListener("touchmove", preventPinchZoom, {
      passive: false,
    });
    return () => {
      document.removeEventListener("touchmove", preventPinchZoom);
    };
  }, []);

  return (
    <SplashScreen>
      <QueryClientProvider client={queryClient}>
        <MultiAccountsProvider>
          <VpnDetector />
          <UpdateDetector />
          <InternetStatusDetector>
            <ErrorBoundary
              fallbackRender={({ error }) => (
                <ErrorBoundaryFallback error={error} />
              )}
            >
              <Router>
                <LayoutWithNavigation>
                  <AllRoutes />
                </LayoutWithNavigation>
              </Router>
            </ErrorBoundary>
            <Toaster />
          </InternetStatusDetector>
        </MultiAccountsProvider>
      </QueryClientProvider>
    </SplashScreen>
  );
}

export default App;