web/packages/booking-flow/lib/components/BookingWidget/FloatingBookingWidget/FloatingBookingWidgetClient.tsx

"use client"

import { useEffect, useRef, useState } from "react"

import BookingWidgetClient, { type BookingWidgetClientProps } from "../Client"

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

type Props = Omit<BookingWidgetClientProps, "type">

export function FloatingBookingWidgetClient(props: Props) {
  const containerRef = useRef<HTMLDivElement>(null)
  const observerRef = useRef<IntersectionObserver | null>(null)
  const [stickyTop, setStickyTop] = useState(false)

  useEffect(() => {
    observerRef.current = new IntersectionObserver(
      ([entry]) => {
        const hasScrolledPastTop = entry.boundingClientRect.top < 0
        setStickyTop(hasScrolledPastTop)
      },
      { threshold: 0, rootMargin: "0px 0px -100% 0px" }
    )

    if (containerRef.current) {
      observerRef.current?.observe(containerRef.current)
    }

    return () => {
      observerRef.current?.disconnect()
    }
  }, [])

  useEffect(() => {
    /*
     Re-observe the element on an interval to ensure the observer is up to date
     This is a workaround for the fact that the observer doesn't always trigger
     when the element is scrolled out of view if you do it too fast
    */
    const interval = setInterval(() => {
      if (!containerRef.current || !observerRef.current) {
        return
      }

      observerRef.current.unobserve(containerRef.current)
      observerRef.current.observe(containerRef.current)
    }, 500)

    return () => clearInterval(interval)
  }, [])

  return (
    <div
      className={styles.floatingBookingWidget}
      data-intersecting={stickyTop}
      ref={containerRef}
    >
      <div className={styles.floatingBackground}>
        <BookingWidgetClient {...props} type={"compact"} />
      </div>
    </div>
  )
}