import { redirect } from "next/navigation"

import {
  getCreditCardsSafely,
  getHotelData,
  getProfileSafely,
} from "@/lib/trpc/memoizedRequests"

import EnterDetailsProvider from "@/components/HotelReservation/EnterDetails/Provider"
import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
import SidePeek from "@/components/HotelReservation/EnterDetails/SidePeek"
import Summary from "@/components/HotelReservation/EnterDetails/Summary"
import HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader"
import { setLang } from "@/i18n/serverContext"

import styles from "./layout.module.css"

import { StepEnum } from "@/types/components/enterDetails/step"
import type { LangParams, LayoutArgs } from "@/types/params"

function preload(id: string, lang: string) {
  void getHotelData(id, lang)
  void getProfileSafely()
  void getCreditCardsSafely()
}

export default async function StepLayout({
  children,
  params,
}: React.PropsWithChildren<LayoutArgs<LangParams & { step: StepEnum }>>) {
  setLang(params.lang)
  preload("811", params.lang)

  const hotel = await getHotelData("811", params.lang)

  if (!hotel?.data) {
    redirect(`/${params.lang}`)
  }

  return (
    <EnterDetailsProvider step={params.step}>
      <main className={styles.layout}>
        <HotelSelectionHeader hotel={hotel.data.attributes} />
        <div className={styles.content}>
          <SelectedRoom />
          {children}
          <aside className={styles.summary}>
            <Summary />
          </aside>
        </div>
        <SidePeek hotel={hotel.data.attributes} />
      </main>
    </EnterDetailsProvider>
  )
}