import type { HeadersFunction, LoaderFunctionArgs } from "react-router";
import { useLoaderData, useRouteError } from "react-router";
import { boundary } from "@shopify/shopify-app-react-router/server";
import { AppProvider } from "@shopify/shopify-app-react-router/react";

import { authenticate } from "../shopify.server";
import { GlobalProvider } from "app/components/providers/global-context";
import { AppContent } from "app/components/app-content";
import { AppProvider as PolarisAppProvider } from "@shopify/polaris";
import { queryClient } from "app/utils/queryClient";
import { QueryClientProvider } from "@tanstack/react-query";
import { ToastProvider } from "app/components/providers/use-toast";

import polarisTranslations from "@shopify/polaris/locales/en.json";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const { session } = await authenticate.admin(request);

  return { apiKey: process.env.SHOPIFY_API_KEY || "", session };
};

export default function App() {
  const { apiKey, session } = useLoaderData<typeof loader>();
  return (
    <AppProvider embedded apiKey={apiKey}>
      <PolarisAppProvider i18n={polarisTranslations}>
        <QueryClientProvider client={queryClient}>
          <ToastProvider>
            <GlobalProvider>
              <AppContent />
            </GlobalProvider>
          </ToastProvider>
        </QueryClientProvider>
      </PolarisAppProvider>
    </AppProvider>
  );
}

export function ErrorBoundary() {
  return boundary.error(useRouteError());
}

export const headers: HeadersFunction = (headersArgs) => {
  return boundary.headers(headersArgs);
};