import { AdvancedMarker, AdvancedMarkerAnchorPoint, } from "@vis.gl/react-google-maps" import { useCallback, useState } from "react" import { useIntl } from "react-intl" import { useHotelsMapStore } from "@/stores/hotels-map" import HotelCardDialog from "@/components/HotelReservation/HotelCardDialog" import Body from "@/components/TempDesignSystem/Text/Body" import { formatPrice } from "@/utils/numberFormatting" import HotelMarker from "../../Markers/HotelMarker" import styles from "./hotelListingMapContent.module.css" import type { HotelListingMapContentProps } from "@/types/components/hotelReservation/selectHotel/map" function HotelListingMapContent({ hotelPins }: HotelListingMapContentProps) { const intl = useIntl() const [hoveredHotelPin, setHoveredHotelPin] = useState(null) const { activeHotelPin, setActiveHotelPin, setActiveHotelCard } = useHotelsMapStore() const toggleActiveHotelPin = useCallback( (pinName: string | null) => { if (setActiveHotelPin) { const newActivePin = activeHotelPin === pinName ? null : pinName setActiveHotelPin(newActivePin) setActiveHotelCard(newActivePin) if (newActivePin === null) { setHoveredHotelPin(null) setActiveHotelCard(null) } } }, [activeHotelPin, setActiveHotelPin, setActiveHotelCard] ) const handleHover = useCallback( (pinName: string | null) => { if (pinName !== null && activeHotelPin !== pinName) { setHoveredHotelPin(pinName) if (activeHotelPin && setActiveHotelPin) { setActiveHotelPin(null) setActiveHotelCard(null) } } else if (pinName === null) { setHoveredHotelPin(null) } }, [activeHotelPin, setActiveHotelPin, setActiveHotelCard] ) return (

{hotelPins.map((pin) => { const isActiveOrHovered = activeHotelPin === pin.name || hoveredHotelPin === pin.name const hotelPrice = pin.memberPrice ?? pin.publicPrice return ( handleHover(pin.name)} onMouseLeave={() => handleHover(null)} onClick={() => toggleActiveHotelPin(pin.name)} >

void }) => { event.stopPropagation() if (activeHotelPin === pin.name) { toggleActiveHotelPin(null) } }} data={pin} />

{/* TODO: Handle when no price is available */} {hotelPrice ? formatPrice(intl, hotelPrice, pin.currency) : intl.formatMessage({ id: "N/A" })} ) })}

) } export default HotelListingMapContent