// MUI Imports
import InitColorSchemeScript from '@mui/material/InitColorSchemeScript'

// Third-party Imports
import 'react-perfect-scrollbar/dist/css/styles.css'
import 'leaflet/dist/leaflet.css'

// Style Imports
import '@/app/globals.css'

// Generated Icon CSS Imports
import '@assets/iconify-icons/generated-icons.css'
import { hasLocale, Locale, NextIntlClientProvider } from 'next-intl' /*  */
import { routing } from '@/i18n/routing'
import { notFound } from 'next/navigation'
import { ToastContainer } from 'react-toastify'
import themeConfig from '@/configs/themeConfig'

import { AuthProvider } from '@/context/auth/AuthContext'
import QueryProvider from '../components/QueryProvider'

import BProgressProvider from '@/app/components/BProgressProvider'
import { PermissionProvider } from '@/context/auth/PermissionProvider'

export const metadata = {
  title: 'Menu',
  description: 'Menu Dashboard'
}

const RootLayout = async ({ children, params }: { children: React.ReactNode; params: Promise<{ lang: Locale }> }) => {
  const param = await params
  const { lang } = param

  if (!hasLocale(routing.locales, lang)) {
    notFound()
  }

  const direction = lang === 'ar' ? 'rtl' : 'ltr'

  return (
    <html id='__next' lang={lang} dir={direction} /* suppressHydrationWarning */>
      <body className='flex is-full min-bs-full flex-auto flex-col'>
        <InitColorSchemeScript attribute='data' />
        <NextIntlClientProvider>
          <QueryProvider>
            <BProgressProvider>
              <AuthProvider>
                <PermissionProvider>{children}</PermissionProvider>
                <ToastContainer
                  {...themeConfig.toastSettings}
                  position={lang === 'ar' ? 'top-left' : 'top-right'}
                  rtl={lang === 'ar'}
                />{' '}
              </AuthProvider>
            </BProgressProvider>
          </QueryProvider>
        </NextIntlClientProvider>
      </body>
    </html>
  )
}

export default RootLayout
