import { Poppins } from 'next/font/google';
import NextTopLoader from 'nextjs-toploader';
import './globals.css';
import GlobalProvider from '@/context/Provider';
import { Toaster } from 'react-hot-toast';
import { cookies } from 'next/headers';
import apis from '@/utils/apis';
import { AuthInterface } from '@/context/interfaces';
import { GoogleOAuthProvider } from '@react-oauth/google';
import Script from 'next/script';
import { SonnerToaster } from '@/components/ui/sonnerToaster';

export const metadata = {
  title: 'ReadyEats',
  icons: {
    icon: '/favicon.ico'
  }
};

const rubik = Poppins({
  subsets: ['latin'],
  weight: ['400', '500', '600', '700'],
  display: 'swap'
});

export default async function RootLayout({
  children
}: {
  children: React.ReactNode;
}) {
  const cookieStore = cookies();
  const access_token = cookieStore.get('COOKIES_USER_ACCESS_TOKEN')?.value;
  let user_info: AuthInterface | undefined = undefined;

  if (access_token) {
    try {
      apis.setToken(access_token);
      const apiRes = await apis.Auth.profile();
      user_info = { ...apiRes?.data, access_token: access_token };
    } catch (error) {
      console.error('Error fetching user info:', error);
    }
  }

  return (
    <html
      lang="en"
      className={`${rubik.className}`}
      suppressHydrationWarning={true}
    >
      <Script
        src="https://apis.google.com/js/platform.js?onload=init"
        strategy="afterInteractive"
        async
        defer
      ></Script>
      {/* <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDzM0vknT1DDw-Yki0N7XdFVtmj5RPzy28&libraries=places"
        async
        defer
      ></script> */}
      <body className={'overflow-hidden'}>
        <NextTopLoader showSpinner={false} />
        <GoogleOAuthProvider
          clientId={
            '178859710250-8eg061uoketd98eo6v8mrbg4jrlq99o7.apps.googleusercontent.com'
          }
        >
          <GlobalProvider userInfo={user_info}>
            <Toaster position="top-center" />
            <SonnerToaster position="top-right" richColors />
            {children}
          </GlobalProvider>
        </GoogleOAuthProvider>
      </body>
    </html>
  );
}
