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

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

import PoiMarker from "../../Markers/Poi"
import ScandicMarker from "../../Markers/Scandic"

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

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

export default function HotelMapContent({
  coordinates,
  pointsOfInterest,
  onActivePoiChange,
  activePoi,
}: HotelMapContentProps) {
  function toggleActivePoi(poiName: string) {
    onActivePoiChange?.(activePoi === poiName ? null : poiName)
  }
  return (
    <>
      <AdvancedMarker position={coordinates} zIndex={1}>
        <ScandicMarker />
      </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)}
          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>{poi.distance} km</span>
                </Caption>
              </span>
            </Body>
          </span>
        </AdvancedMarker>
      ))}
    </>
  )
}
