import { NextIntlClientProvider } from "next-intl";
import { getLocale, getMessages } from "next-intl/server";
import { notFound } from "next/navigation";
import { routing } from "src/i18n/routing";
import "../../styles/globals.css";
import Navbar from "src/components/NavBar";
import Footer from "src/view/Landing/components/Footer";
import { ToastContainer } from 'react-toastify';
import graphql from "src/utils/graphql";

import { Rubik, Roboto } from "next/font/google";
import { Bounce } from "react-toastify";

const gql = `
query Navbars($locale: I18NLocaleCode) {
    navbars(locale: $locale, sort: ["order:asc"]) {
        documentId
        title
        link
        children {
            id
            title
            link
        }
    }
}

`
const rubik = Rubik({
  subsets: ["arabic"],
  weight: ["400", "700"],
  variable: "--font-rubik", // This will create a CSS variable for easy use
});

const roboto = Roboto({
  subsets: ["latin"],
  weight: ["400", "700"],
  variable: "--font-roboto", // Create a CSS variable for Roboto
});

const fetchNavbarItems = async () => {
  const locale = await getLocale()
  const { navbars } = await graphql(gql, {
    locale: locale
  })
  return navbars
}

// app/[locale]/page.js

export const generateMetadata = async ({ params }) => {
  const { locale } = await params
  const t = await getMessages(locale)
  // Define titles and descriptions for each locale


  return {
    title: t.HomePage.SEO.title,
    description: t.HomePage.SEO.descriptions,
  };
};


export const viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  // Also supported but less commonly used
  // interactiveWidget: 'resizes-visual',
}

export default async function LocaleLayout({
  children,
  params
}) {

  const { locale } = await params
  const navbaritems = await fetchNavbarItems()
  // Ensure that the incoming `locale` is valid
  if (!routing.locales.includes(locale)) {
    notFound();
  }

  // Providing all messages to the client
  // side is the easiest way to get started
  const messages = await getMessages();

  return (
    <html lang={locale} dir={locale === "en" ? "ltr" : "rtl"}>
      <head>
        <meta name="apple-mobile-web-app-title" content="AdHorizonIntl" />
      </head>
      <body className={`${rubik.variable} ${roboto.variable} antialiased `} suppressHydrationWarning>
        <NextIntlClientProvider messages={messages}>
          <Navbar items={navbaritems} />
          {children}
          <ToastContainer
            position="bottom-right"
            autoClose={5000}
            limit={5}
            hideProgressBar={false}
            newestOnTop={false}
            closeOnClick
            rtl={false}
            pauseOnFocusLoss
            draggable
            pauseOnHover
            theme="light"
            transition={Bounce}
          />
          <Footer />
          <ToastContainer />
        </NextIntlClientProvider>
      </body>
    </html>
  );
}