83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
"use client"
|
|
import { APIProvider } from "@vis.gl/react-google-maps"
|
|
import { useRouter } from "next/navigation"
|
|
import { useState } from "react"
|
|
import { useIntl } from "react-intl"
|
|
|
|
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 styles from "./selectHotelMap.module.css"
|
|
|
|
import { SelectHotelMapProps } from "@/types/components/hotelReservation/selectHotel/map"
|
|
|
|
export default function SelectHotelMap({
|
|
apiKey,
|
|
coordinates,
|
|
pointsOfInterest,
|
|
mapId,
|
|
isModal,
|
|
}: SelectHotelMapProps) {
|
|
const router = useRouter()
|
|
const lang = useLang()
|
|
const intl = useIntl()
|
|
const [activePoi, setActivePoi] = useState<string | null>(null)
|
|
|
|
function handleModalDismiss() {
|
|
router.back()
|
|
}
|
|
|
|
function handlePageRedirect() {
|
|
router.push(
|
|
`${selectHotel[lang]}?${new URLSearchParams(window.location.search)}`
|
|
)
|
|
}
|
|
|
|
const closeButton = (
|
|
<Button
|
|
intent="inverted"
|
|
size="small"
|
|
theme="base"
|
|
className={styles.closeButton}
|
|
onClick={isModal ? handleModalDismiss : handlePageRedirect}
|
|
>
|
|
<CloseIcon color="burgundy" />
|
|
{intl.formatMessage({ id: "Close the map" })}
|
|
</Button>
|
|
)
|
|
return (
|
|
<APIProvider apiKey={apiKey}>
|
|
<div className={styles.container}>
|
|
<div className={styles.filterContainer}>
|
|
<Button
|
|
intent="text"
|
|
size="small"
|
|
variant="icon"
|
|
wrapping
|
|
onClick={isModal ? handleModalDismiss : handlePageRedirect}
|
|
>
|
|
<CloseLargeIcon />
|
|
</Button>
|
|
<span>Filter and sort</span>
|
|
{/* TODO: Add filter and sort button */}
|
|
</div>
|
|
<HotelListing />
|
|
<InteractiveMap
|
|
closeButton={closeButton}
|
|
coordinates={coordinates}
|
|
pointsOfInterest={pointsOfInterest}
|
|
activePoi={activePoi}
|
|
onActivePoiChange={setActivePoi}
|
|
mapId={mapId}
|
|
/>
|
|
</div>
|
|
</APIProvider>
|
|
)
|
|
}
|