import { redirect } from "next/navigation"

import { serverClient } from "@/lib/trpc/server"

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"

export default async function StepLayout({
  children,
  params,
}: React.PropsWithChildren<LayoutArgs<LangParams & { step: StepEnum }>>) {
  setLang(params.lang)
  const hotel = await serverClient().hotel.hotelData.get({
    hotelId: "811",
    language: 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>
  )
}