import { Metadata, Viewport } from "next";
import "./globals.css";
import { ReactQueryProvider } from "@/features/providers/ReactQueryProvider";
import { notFound } from "next/navigation";
import i18nConfig from "../../i18nConfig";
import initTranslations from '@/lib/i18n';
import TranslationsProvider from "@/components/utils/TranslationsProdiver";
import ToastContainer from "@/components/Toast";
import { ThemeColorSetter } from "@/components/ThemeColorSetter";
import { ThemeBootScript } from "@/components/ThemeBootScript";
import PwaServiceWorker from "@/components/PwaServiceWorker";

export const metadata: Metadata = {
  title: 'Dashboard',
  description: 'Webapp dashboard',
}

export const viewport: Viewport = {
  themeColor: '#F4F5F9',
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  minimumScale: 1,
  userScalable: false,
}

const i18nNamespaces = ['settings', 'common', 'menu', 'orders', 'auth', "rating", "chat", "notifications", 'parallels'];

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const locale = "fa";
  if (!i18nConfig.locales.includes(locale)) {
    notFound();
  }
  const { resources } = await initTranslations(locale, i18nNamespaces);

  return (

    <html
      lang='fa'
      dir='rtl'
      className="h-svh overflow-hidden"
      data-theme="light" >
      <head />
      <body

        className={`antialiased bg-background h-svh overflow-hidden`}
      >
        <ThemeBootScript />
        <ReactQueryProvider>
          <TranslationsProvider
            namespaces={i18nNamespaces}
            locale={locale}
            resources={resources}>
            <ThemeColorSetter />
            <PwaServiceWorker />
            <div id="root" className="h-svh overflow-hidden">
              {children}
            </div>
          </TranslationsProvider>
          <ToastContainer />
        </ReactQueryProvider>
      </body>
    </html >
  );
}
