import { SessionProvider } from "next-auth/react"
import type { Metadata } from "next"
import "../styles/styles.css"
import "../styles/global.css"
import "tailwindcss/tailwind.css"

import App, { AppContext, AppProps } from 'next/app';
import type { Session } from "next-auth";
import { useEffect, useState } from "react"
import { useRouter } from "next/router";
import { NextIntlClientProvider } from 'next-intl';
import { getServerSession } from "next-auth/next";


// for fontawesome
import Head from 'next/head';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
// Use of the <SessionProvider> is mandatory to allow components that call
// `useSession()` anywhere in your application to access the `session` object.

// export const metadata: Metadata = {
//   title: "Специално Свидетелстване София",
//   description: "Специално Свидетелстване София",
//   viewport: "width=device-width, initial-scale=1",
//   appleWebApp: true,
// }

// (custom) Service worker registration and push notification logic
// function registerServiceWorkerAndPushNotifications() {
//   useEffect(() => {
//     const registerServiceWorker = async () => {
//       if ('serviceWorker' in navigator) {
//         try {
//           const registration = await navigator.serviceWorker.register('/worker/index.js')
//             .then((registration) => console.log('reg: ', registration));
//         } catch (error) {
//           console.log('Service Worker registration failed:', error);
//         }
//       }
//     };

//     const askForNotificationPermission = async () => {
//       if ('serviceWorker' in navigator && 'PushManager' in window) {
//         try {
//           const permission = await Notification.requestPermission();
//           if (permission === 'granted') {
//             console.log('Notification permission granted.');
//             // TODO: Subscribe the user to push notifications here
//           } else {
//             console.log('Notification permission not granted.');
//           }
//         } catch (error) {
//           console.error('Error during service worker registration:', error);
//         }
//       } else {
//         console.log('Service Worker or Push notifications not supported in this browser.');
//       }
//     };

//     registerServiceWorker();
//     askForNotificationPermission();
//   }, []);
// }

//function SmwsApp({ Component, pageProps: { locale, messages, session, ...pageProps }, }: AppProps<{ session: Session }>) {
function SmwsApp({ Component, pageProps, session, locale, messages }) {

  //registerServiceWorkerAndPushNotifications();

  useEffect(() => {
    const use = async () => {
      (await import('tw-elements')).default;
    };
    use();
  }, []);


  // PUSH NOTIFICATIONS
  useEffect(() => {
    // Function to ask for Notification permission
    const askForNotificationPermission = async () => {
      // Check if the browser supports service workers and push notifications
      if ('serviceWorker' in navigator && 'PushManager' in window) {
        try {
          // Wait for service worker registration
          const registration = await navigator.serviceWorker.ready;
          // Ask for notification permission
          const permission = await Notification.requestPermission();
          if (permission === 'granted') {
            console.log('Notification permission granted.');
            // TODO: Subscribe the user to push notifications here
          } else {
            console.log('Notification permission not granted.');
          }
        } catch (error) {
          console.error('Error during service worker registration:', error);
        }
      } else {
        console.log('Service Worker or Push notifications not supported in this browser.');
      }
    };

    // Call the function to ask for permission on first load
    askForNotificationPermission();
  }, []);


  return (
    <>
      <NextIntlClientProvider
        locale={locale}
        timeZone="Europe/Sofia"
        messages={messages}
      >
        <SessionProvider session={session} >
          <LocalizationProvider dateAdapter={AdapterDayjs}>
            <Component {...pageProps} />
          </LocalizationProvider>
        </SessionProvider>
      </NextIntlClientProvider >
    </>
  )
}

async function loadLocaleData(locale) {
  try {
    const messages = await import(`../content/i18n/${locale}.json`);
    return messages.default;
  } catch (e) {
    console.warn("Could not load locale data for:", locale);
    return {};
  }
}

SmwsApp.getInitialProps = async (appContext: AppContext) => {
  const appProps = await App.getInitialProps(appContext);
  const locale = appContext.router.locale || 'bg';
  const messages = await loadLocaleData(locale);

  return {
    ...appProps,
    locale,
    messages,
  };
};
export default SmwsApp;