136 lines
4.0 KiB
TypeScript
136 lines
4.0 KiB
TypeScript
"use client"
|
|
import { APIProvider } from "@vis.gl/react-google-maps"
|
|
import { useRouter, useSearchParams } from "next/navigation"
|
|
import { useEffect, 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 Button from "@/components/TempDesignSystem/Button"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import HotelListing from "./HotelListing"
|
|
import { getCentralCoordinates } from "./utils"
|
|
|
|
import styles from "./selectHotelMap.module.css"
|
|
|
|
import { SelectHotelMapProps } from "@/types/components/hotelReservation/selectHotel/map"
|
|
|
|
export default function SelectHotelMap({
|
|
apiKey,
|
|
hotelPins,
|
|
mapId,
|
|
hotels,
|
|
}: 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 centralCoordinates = getCentralCoordinates(hotelPins)
|
|
|
|
const coordinates = isAboveMobile
|
|
? centralCoordinates
|
|
: { ...centralCoordinates, lat: centralCoordinates.lat - 0.006 }
|
|
|
|
const selectHotelParams = new URLSearchParams(searchParams.toString())
|
|
const selectedHotel = selectHotelParams.get("selectedHotel")
|
|
|
|
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}>
|
|
<div className={styles.filterContainer}>
|
|
<Button
|
|
intent="text"
|
|
size="small"
|
|
variant="icon"
|
|
wrapping
|
|
onClick={handlePageRedirect}
|
|
className={styles.filterContainerCloseButton}
|
|
>
|
|
<CloseLargeIcon />
|
|
</Button>
|
|
<span>Filter and sort</span>
|
|
{/* TODO: Add filter and sort button */}
|
|
</div>
|
|
<HotelListing
|
|
hotels={hotels}
|
|
activeHotelPin={activeHotelPin}
|
|
setActiveHotelPin={setActiveHotelPin}
|
|
/>
|
|
{showBackToTop && (
|
|
<Button
|
|
intent="inverted"
|
|
size="small"
|
|
theme="base"
|
|
className={styles.backToTopButton}
|
|
onClick={scrollToTop}
|
|
>
|
|
{intl.formatMessage({ id: "Back to top" })}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<InteractiveMap
|
|
closeButton={closeButton}
|
|
coordinates={coordinates}
|
|
hotelPins={hotelPins}
|
|
activeHotelPin={activeHotelPin}
|
|
onActiveHotelPinChange={setActiveHotelPin}
|
|
mapId={mapId}
|
|
/>
|
|
</div>
|
|
</APIProvider>
|
|
)
|
|
}
|