web/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx

"use client"
import { APIProvider } from "@vis.gl/react-google-maps"
import { useRouter, useSearchParams } from "next/navigation"
import { useEffect, useRef, useState } from "react"
import { useIntl } from "react-intl"
import { useMediaQuery } from "usehooks-ts"

import { selectHotel } from "@/constants/routes/hotelReservation"

import { CloseIcon, CloseLargeIcon } from "@/components/Icons"
import InteractiveMap from "@/components/Maps/InteractiveMap"
import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
import Button from "@/components/TempDesignSystem/Button"
import useLang from "@/hooks/useLang"

import FilterAndSortModal from "../FilterAndSortModal"
import HotelListing from "./HotelListing"

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

import { SelectHotelMapProps } from "@/types/components/hotelReservation/selectHotel/map"

export default function SelectHotelMap({
  apiKey,
  hotelPins,
  mapId,
  hotels,
  filterList,
  cityCoordinates,
}: SelectHotelMapProps) {
  const searchParams = useSearchParams()
  const router = useRouter()
  const lang = useLang()
  const intl = useIntl()
  const isAboveMobile = useMediaQuery("(min-width: 768px)")
  const [activeHotelPin, setActiveHotelPin] = useState<string | null>(null)
  const [showBackToTop, setShowBackToTop] = useState<boolean>(false)
  const listingContainerRef = useRef<HTMLDivElement | null>(null)

  const selectHotelParams = new URLSearchParams(searchParams.toString())
  const selectedHotel = selectHotelParams.get("selectedHotel")

  const coordinates = isAboveMobile
    ? cityCoordinates
    : { ...cityCoordinates, lat: cityCoordinates.lat - 0.006 }

  useEffect(() => {
    if (listingContainerRef.current) {
      const activeElement =
        listingContainerRef.current.querySelector(`[data-active="true"]`)
      if (activeElement) {
        activeElement.scrollIntoView({ behavior: "smooth", block: "nearest" })
      }
    }
  }, [activeHotelPin])

  useEffect(() => {
    if (selectedHotel) {
      setActiveHotelPin(selectedHotel)
    }
  }, [selectedHotel])

  useEffect(() => {
    const hotelListingElement = document.querySelector(
      `.${styles.listingContainer}`
    )
    if (!hotelListingElement) return

    const handleScroll = () => {
      const hasScrolledPast = hotelListingElement.scrollTop > 490
      setShowBackToTop(hasScrolledPast)
    }

    hotelListingElement.addEventListener("scroll", handleScroll)
    return () => hotelListingElement.removeEventListener("scroll", handleScroll)
  }, [])

  function scrollToTop() {
    const hotelListingElement = document.querySelector(
      `.${styles.listingContainer}`
    )
    hotelListingElement?.scrollTo({ top: 0, behavior: "smooth" })
  }

  function handlePageRedirect() {
    router.push(`${selectHotel(lang)}?${searchParams.toString()}`)
  }

  const closeButton = (
    <Button
      intent="inverted"
      size="small"
      theme="base"
      className={styles.closeButton}
      onClick={handlePageRedirect}
    >
      <CloseIcon color="burgundy" />
      {intl.formatMessage({ id: "Close the map" })}
    </Button>
  )
  return (
    <APIProvider apiKey={apiKey}>
      <div className={styles.container}>
        <div className={styles.listingContainer} ref={listingContainerRef}>
          <div className={styles.filterContainer}>
            <Button
              intent="text"
              size="small"
              variant="icon"
              wrapping
              onClick={handlePageRedirect}
              className={styles.filterContainerCloseButton}
            >
              <CloseLargeIcon />
            </Button>
            <FilterAndSortModal filters={filterList} />
          </div>
          <HotelListing
            hotels={hotels}
            activeHotelPin={activeHotelPin}
            setActiveHotelPin={setActiveHotelPin}
          />
          {showBackToTop && <BackToTopButton onClick={scrollToTop} />}
        </div>
        <InteractiveMap
          closeButton={closeButton}
          coordinates={coordinates}
          hotelPins={hotelPins}
          activeHotelPin={activeHotelPin}
          onActiveHotelPinChange={setActiveHotelPin}
          mapId={mapId}
        />
      </div>
    </APIProvider>
  )
}