web/packages/booking-flow/lib/components/HotelReservationSidePeek/index.tsx

"use client"

import { useEffect } from "react"

import { trpc } from "@scandic-hotels/trpc/client"

import useLang from "../../hooks/useLang"
import useSidePeekStore from "../../stores/sidepeek"
import HotelSidePeek from "../HotelSidePeek"
import RoomSidePeek from "../RoomSidePeek"

export default function HotelReservationSidePeek() {
  const { activeSidePeek, hotelId, roomTypeCode, showCTA } = useSidePeekStore(
    (state) => ({
      activeSidePeek: state.activeSidePeek,
      hotelId: state.hotelId,
      roomTypeCode: state.roomTypeCode,
      showCTA: state.showCTA,
    })
  )
  const closeFn = useSidePeekStore((state) => state.closeSidePeek)
  const lang = useLang()

  const { data: hotelData } = trpc.hotel.get.useQuery(
    {
      hotelId: hotelId ?? "",
      language: lang,
      isCardOnlyPayment: false,
    },
    {
      enabled: !!hotelId,
    }
  )

  const selectedRoom = hotelData?.roomCategories.find((room) =>
    room.roomTypes.some((type) => type.code === roomTypeCode)
  )

  useEffect(() => {
    if (activeSidePeek) {
      window.history.pushState(null, "", window.location.href)
    }
  }, [activeSidePeek])

  useEffect(() => {
    function handlePopState() {
      if (activeSidePeek) {
        closeFn()
      }
    }

    window.addEventListener("popstate", handlePopState)

    return () => {
      window.removeEventListener("popstate", handlePopState)
    }
  }, [activeSidePeek, closeFn])

  if (activeSidePeek) {
    return (
      <>
        {hotelData && (
          <HotelSidePeek
            additionalHotelData={hotelData.additionalData}
            hotel={{ ...hotelData.hotel, url: hotelData.url }}
            restaurants={hotelData.restaurants}
            activeSidePeek={activeSidePeek}
            close={closeFn}
            showCTA={showCTA}
          />
        )}
        {selectedRoom && (
          <RoomSidePeek
            room={selectedRoom}
            activeSidePeek={activeSidePeek}
            close={closeFn}
          />
        )}
      </>
    )
  }

  return null
}