web/apps/scandic-web/components/Maps/InteractiveMap/HotelListingMapContent/index.tsx

import {
  AdvancedMarker,
  AdvancedMarkerAnchorPoint,
} from "@vis.gl/react-google-maps"
import { useCallback } from "react"

import { useHotelsMapStore } from "@/stores/hotels-map"

import HotelCardDialog from "@/components/HotelReservation/HotelCardDialog"
import { trackEvent } from "@/utils/tracking/base"

import HotelPin from "./HotelPin"

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

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

function HotelListingMapContent({ hotelPins }: HotelListingMapContentProps) {
  const { activeHotel, hoveredHotel, activate, deactivate, engage, disengage } =
    useHotelsMapStore()

  const toggleActiveHotelPin = useCallback(
    (pinName: string | null, hotelId: string) => {
      if (activeHotel === pinName || pinName === null) {
        deactivate()
        return
      }
      trackEvent({
        event: "hotelClickMap",
        map: {
          action: "hotel click - map",
        },
        hotelInfo: {
          hotelId,
        },
      })
      activate(pinName)
    },
    [activeHotel, activate, deactivate]
  )

  return (
    <div>
      {hotelPins.map((pin) => {
        const isActiveOrHovered =
          activeHotel === pin.name || hoveredHotel === pin.name
        const hotelPrice =
          pin.memberPrice ??
          pin.publicPrice ??
          pin.redemptionPrice ??
          pin.voucherPrice ??
          pin.chequePrice?.numberOfCheques ??
          null

        const hotelAdditionalPrice = pin.chequePrice
          ? pin.chequePrice.additionalPricePerStay
          : undefined
        const hotelAdditionalCurrency = pin.chequePrice
          ? pin.chequePrice.currency?.toString()
          : undefined
        return (
          <AdvancedMarker
            key={pin.name}
            className={styles.advancedMarker}
            position={pin.coordinates}
            anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
            zIndex={isActiveOrHovered ? 2 : 0}
            onMouseEnter={() => engage(pin.name)}
            onMouseLeave={() => disengage()}
            onClick={() => toggleActiveHotelPin(pin.name, pin.operaId)}
          >
            <div className={styles.dialogContainer}>
              <HotelCardDialog
                isOpen={isActiveOrHovered}
                handleClose={(event: { stopPropagation: () => void }) => {
                  event.stopPropagation()
                  deactivate()
                  disengage()
                }}
                data={pin}
              />
            </div>
            <HotelPin
              isActive={isActiveOrHovered}
              hotelPrice={hotelPrice}
              currency={pin.currency}
              hotelAdditionalPrice={hotelAdditionalPrice}
              hotelAdditionalCurrency={hotelAdditionalCurrency}
            />
          </AdvancedMarker>
        )
      })}
    </div>
  )
}

export default HotelListingMapContent