web/apps/scandic-web/components/SitewideAlert/index.tsx

"use client"

import { useCallback, useRef } from "react"

import useStickyPosition from "@scandic-hotels/common/hooks/useStickyPosition"
import { StickyElementNameEnum } from "@scandic-hotels/common/stores/sticky-position"
import { debounce } from "@scandic-hotels/common/utils/debounce"
import { trpc } from "@scandic-hotels/trpc/client"
import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alertType"

import Alert from "@/components/TempDesignSystem/Alert"
import useLang from "@/hooks/useLang"

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

export default function SiteWideAlert() {
  const alertRef = useRef<HTMLDivElement>(null)
  const lang = useLang()
  const { data: siteConfig, isLoading } =
    trpc.contentstack.base.siteConfig.useQuery(
      { lang },
      { refetchInterval: 60_000 }
    )

  const alert = siteConfig?.sitewideAlert

  const isAlarm = alert?.type === AlertTypeEnum.Alarm
  useStickyPosition({
    ref: isAlarm ? alertRef : undefined,
    name: StickyElementNameEnum.SITEWIDE_ALERT,
  })

  const updateHeightRefCallback = useCallback(
    (node: HTMLDivElement | null) => {
      if (node) {
        const debouncedUpdate = debounce(([entry]) => {
          const height = entry.contentRect.height

          document.documentElement.style.setProperty(
            "--sitewide-alert-height",
            `${height}px`
          )

          document.documentElement.style.setProperty(
            "--sitewide-alert-sticky-height",
            isAlarm ? `${height}px` : "0px"
          )
        }, 100)

        const observer = new ResizeObserver(debouncedUpdate)
        observer.observe(node)

        return () => {
          if (node) {
            observer.unobserve(node)
          }
          observer.disconnect()
        }
      }
    },
    [isAlarm]
  )

  if (isLoading || !alert) {
    return null
  }

  return (
    <div
      id="sitewide-alert"
      ref={(node) => {
        alertRef.current = node
        return updateHeightRefCallback(node)
      }}
      className={`${styles.sitewideAlert} ${isAlarm ? styles.alarm : ""}`}
    >
      <Alert
        variant="banner"
        type={alert.type}
        link={alert.link}
        phoneContact={alert.phoneContact}
        sidepeekCtaText={alert.sidepeekButton?.cta_text}
        sidepeekContent={alert.sidepeekContent}
        heading={alert.heading}
        text={alert.text}
      />
    </div>
  )
}