import type { ReactNode } from 'react'
import type { Metadata } from 'next'
import type { SessionData } from '@/types/Auth'

import ReactQueryProviders from '@/providers/ReactQueryProvider'
import EdgeProvider from '@/providers/EdgeProvider'
import PopupController from '@/components/ui/PopupController'

import { cookies } from 'next/headers'
import { getIronSession } from 'iron-session'
import { sessionOptions } from '@/libs/session'

import '@/styles/style.scss'

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

interface RootLayoutProps {
  children: ReactNode
  header: ReactNode
  footer: ReactNode
  floatBtn: ReactNode
}

export default async function RootLayout({ children, header, footer, floatBtn }: RootLayoutProps): Promise<ReactNode> {
  const cookieStore = await cookies()
  const session = await getIronSession<SessionData>(cookieStore, sessionOptions)

  const sessionData = session.isLoggedIn ? JSON.stringify(session) : ''

  return (
    <ReactQueryProviders>
      <EdgeProvider sessionData={sessionData}>
        <html lang="ja" suppressHydrationWarning>
          <body>
            <div className="wrap">
              {header}
              {children}
              {footer}
              {floatBtn}
            </div>
            <PopupController />
          </body>
        </html>
      </EdgeProvider>
    </ReactQueryProviders>
  )
}
