import React from 'react';
import { ConfigProvider } from 'antd';
import type { AppProps } from 'next/app';
import theme from '@/theme/themeConfig';
import { Poppins } from 'next/font/google';
import Head from 'next/head';
import GroupContextProvider from '@/Contexts/GroupContextProvider';
import { useRouter } from 'next/router';
import { publicRoutes } from '@/Constants/PublicRoutes';
import PublicPageLayout from '@/Components/Organisms/PublicPageLayout';
import { adminRoutes } from '@/Constants/AdminRoutes';
import AdminPageLayout from '@/Components/Organisms/AdminPageLayout';
import ProtectedPageLayout from '@/Components/Organisms/ProtectedPageLayout';
import '@/Styles/globals.css';

const poppins = Poppins({
  subsets: ['latin'],
  weight: ['400', '500', '600', '700'],
  variable: '--font-poppins',
});

const AppLayout = ({ Component, ...pageProps }: AppProps) => {
  const router = useRouter();
  if (publicRoutes.includes(router.pathname))
    return (
      <PublicPageLayout className={poppins.variable}>
        <Component {...pageProps} />
      </PublicPageLayout>
    );
  else if(adminRoutes.includes(router.pathname))
    <AdminPageLayout className={poppins.variable}>
      <Component {...pageProps} />
    </AdminPageLayout>
  else
    return (
      <ProtectedPageLayout className={poppins.variable}>
        <Component {...pageProps} />
      </ProtectedPageLayout>
    );
};

const App = ({ Component, pageProps }: AppProps) => {
  return (
    <>
      <Head>
        <title>Wisatin</title>
        <meta charSet="utf-8" />
        <link rel="icon" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta name="description" content="Generated by Wisatin" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Wisatin" />
        <meta name="og:description" content="Generated by Wisatin" />
        <meta name="og:image:alt" content="Wisatin logo" />
        <meta name="twitter:image:alt" content="Wisatin logo" />
        <meta name="twitter:description" content="Generated by Wisatin" />
      </Head>

      <GroupContextProvider>
        <AppLayout Component={Component} {...pageProps} />
      </GroupContextProvider>
    </>
  );
};

export default App;