"use client"

import { trpc } from "@/lib/trpc/client"
import useSidePeekStore from "@/stores/sidepeek"

import AmenitiesSidePeek from "@/components/SidePeeks/AmenitiesSidePeek"
import BookedRoomSidePeek from "@/components/SidePeeks/BookedRoomSidePeek"
import HotelSidePeek from "@/components/SidePeeks/HotelSidePeek"
import RoomSidePeek from "@/components/SidePeeks/RoomSidePeek"
import useLang from "@/hooks/useLang"

export default function HotelReservationSidePeek() {
  const {
    activeSidePeek,
    confirmationNumber,
    hotelId,
    roomTypeCode,
    showCTA,
    user,
  } = useSidePeekStore((state) => ({
    activeSidePeek: state.activeSidePeek,
    confirmationNumber: state.confirmationNumber,
    hotelId: state.hotelId,
    roomTypeCode: state.roomTypeCode,
    showCTA: state.showCTA,
    user: state.user,
  }))
  const close = 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)
  )

  if (activeSidePeek) {
    return (
      <>
        {hotelData && (
          <>
            <HotelSidePeek
              additionalHotelData={hotelData.additionalData}
              hotel={hotelData.hotel}
              restaurants={hotelData.restaurants}
              activeSidePeek={activeSidePeek}
              close={close}
              showCTA={showCTA}
            />
            <AmenitiesSidePeek
              hotel={hotelData.hotel}
              restaurants={hotelData.restaurants}
              additionalHotelData={hotelData.additionalData}
              activeSidePeek={activeSidePeek}
              close={close}
            />
          </>
        )}
        {selectedRoom && (
          <RoomSidePeek
            room={selectedRoom}
            activeSidePeek={activeSidePeek}
            close={close}
          />
        )}
        {selectedRoom && (
          <BookedRoomSidePeek
            room={selectedRoom}
            activeSidePeek={activeSidePeek}
            close={close}
            user={user}
            confirmationNumber={confirmationNumber}
          />
        )}
      </>
    )
  }

  return null
}