"use client"

import { useEffect, useState } from "react"

import { useBookingConfirmationStore } from "@/stores/booking-confirmation"

import TrackingSDK from "@/components/TrackingSDK"
import useLang from "@/hooks/useLang"

import { getTracking } from "./tracking"

import type { Room } from "@/types/stores/booking-confirmation"
import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"

export default function Tracking({
  bookingConfirmation,
}: {
  bookingConfirmation: BookingConfirmation
}) {
  const lang = useLang()
  const bookingRooms = useBookingConfirmationStore((state) => state.rooms)

  const [hasLoadedBookingConfirmation] = useState(() => {
    if (typeof window !== "undefined") {
      return sessionStorage.getItem("hasLoadedBookingConfirmation")
    }
    return null
  })

  useEffect(() => {
    sessionStorage.setItem("hasLoadedBookingConfirmation", "true")

    return () => {
      sessionStorage.removeItem("hasLoadedBookingConfirmation")
    }
  }, [])

  if (!bookingRooms.every(Boolean)) {
    return null
  }

  const rooms = bookingRooms.filter((room): room is Room => !!room)

  const { hotelsTrackingData, pageTrackingData, paymentInfo, ancillaries } =
    getTracking(
      lang,
      bookingConfirmation.booking,
      bookingConfirmation.hotel,
      rooms
    )

  return (
    <TrackingSDK
      pageData={pageTrackingData}
      hotelInfo={hasLoadedBookingConfirmation ? undefined : hotelsTrackingData}
      paymentInfo={hasLoadedBookingConfirmation ? undefined : paymentInfo}
      ancillaries={ancillaries}
    />
  )
}