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

import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"

import HotelMarkerByType from "../../Markers"
import PoiMarker from "../../Markers/Poi"

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

import type { PoiMapMarkersProps } from "@/types/hotel"

export default function PoiMapMarkers({
  coordinates,
  pointsOfInterest,
  onActivePoiChange,
  activePoi,
  markerInfo,
}: PoiMapMarkersProps) {
  const intl = useIntl()

  function toggleActivePoi(poiName: string) {
    onActivePoiChange?.(activePoi === poiName ? null : poiName)
  }
  return (
    <>
      <AdvancedMarker position={coordinates} zIndex={1}>
        <HotelMarkerByType
          hotelId={markerInfo.hotelId}
          hotelType={markerInfo.hotelType}
        />
      </AdvancedMarker>

      {pointsOfInterest.map((poi) => (
        <AdvancedMarker
          key={poi.name}
          className={styles.advancedMarker}
          position={poi.coordinates}
          anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
          zIndex={activePoi === poi.name ? 2 : 0}
          onMouseEnter={() => onActivePoiChange?.(poi.name ?? null)}
          onMouseLeave={() => onActivePoiChange?.(null)}
          onClick={() => toggleActivePoi(poi.name ?? "")}
        >
          <span
            className={`${styles.poi} ${activePoi === poi.name ? styles.active : ""}`}
          >
            <PoiMarker
              group={poi.group}
              categoryName={poi.categoryName}
              size={activePoi === poi.name ? 20 : 16}
            />
            <Body className={styles.poiLabel} asChild>
              <span>
                {poi.name}
                <Caption asChild>
                  <span>
                    {intl.formatMessage(
                      {
                        defaultMessage: "{distanceInKm} km",
                      },
                      {
                        distanceInKm: poi.distance,
                      }
                    )}
                  </span>
                </Caption>
              </span>
            </Body>
          </span>
        </AdvancedMarker>
      ))}
    </>
  )
}
