web/components/SitewideAlert/index.tsx

"use client"

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

import { trpc } from "@/lib/trpc/client"
import { StickyElementNameEnum } from "@/stores/sticky-position"

import Alert from "@/components/TempDesignSystem/Alert"
import useLang from "@/hooks/useLang"
import useStickyPosition from "@/hooks/useStickyPosition"
import { debounce } from "@/utils/debounce"

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

import { AlertTypeEnum } from "@/types/enums/alert"

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 updateHeight = useCallback(() => {
    if (alertRef.current) {
      const height = alertRef.current.offsetHeight
      document.documentElement.style.setProperty(
        "--sitewide-alert-height",
        `${height}px`
      )
    }
  }, [])

  useEffect(() => {
    const alertElement = alertRef.current
    const debouncedResizeHandler = debounce(() => {
      updateHeight()
    }, 100)
    const observer = new ResizeObserver(debouncedResizeHandler)

    if (alertElement) {
      observer.observe(alertElement)
    }

    return () => {
      if (alertElement) {
        observer.unobserve(alertElement)
      }
      observer.disconnect()
    }
  }, [updateHeight])

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

  return (
    <div
      ref={alertRef}
      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>
  )
}